AngularJS - Confusion about directives

Question

I think I am confused about how to properly build custom directives - namely when to use a controller inside a directive. If they use an isolated scope and have properties passed to them from their parent controller this is fine.

However, seeing as I thought directives should be treated as reusable components, it makes sense to have their own controllers to set up helper methods, scope variables etc, like in a regular controller. For instance I have a custom directive and in it's template I use ng-show. The condition checks a scope property using a method I write in the directive's controller.

<div>
    <div ng-show="isLong()"></div>
</div>

In the directive I set up isLong in the controller:

angular.module('myApp')
    .directive('myDirective', [function () {
        return {
            restrict: 'A',
            controller: function($scope, $element, $attrs){
                $scope.isLong = function(){
                    return true;
                }
            }
        };
    }]);

Though I have not found any Angular articles about directives which talk about this use of directives. How should I be using them? And in this above example, from the directive's template how am I supposed to use ng-show?

Any guidance appreciated. I'm trying to use Angular in the right way.

tkachenko-vladislav tkachenko-vladislav · Accepted Answer · 2014-06-19T07:14:13

second argument not correct

angular.module('myApp')
    .directive('myDirective', function () {
        return {
            restrict: 'A',
            controller: function($scope, $element, $attrs){
                $scope.isLong = function(){
                    return true;
                }
            }
        };
    });

if you wont inject different service, you must be injectet them in array

angular.module('myApp')
    .directive('myDirective', ['someService', function (someService) {
        return {
            restrict: 'A',
            controller: function($scope, $element, $attrs){
                $scope.isLong = function(){
                    return true;
                }
            }
        };
    });

AngularJS - Confusion about directives

2 Answers