Angular Controller on Custom Directive

Question

Here is my controllers.js file

(function(ctx,angular){
    'use strict';
    angular.module('app.controllers')

    .controller('SearchMasterController',['$scope',function($scope){
        //My Code
    }]);

})(window, angular);

And this is my directives.js file

(function(ctx,angular){
    function ControllerFunction(){
        //My Controller Code
    }
    var directiveConfig = {
        restrict:'E',
        templateUrl:'path/to/acco.html',
        controller: ControllerFunction
    }

    angular.module('app.directives')
    .directive('acco', function(){
        return directiveConfig;
    });
})(window, angular);

Now my question is, can I use this acco directive with some different controller. Ideally, is there any way to get it working like

<acco ng-controller="SearchMasterController"></acco> ?

I tried doing,

<acco>
    <div ng-controller="SearchMasterController"></div>
</acco>

and it seems to work.

Is it possible to use

<acco ng-controller="SearchMasterController"></acco> ?

The latter alternative looks ugly to me.

check this one : stackoverflow.com/questions/19444414/…

vignesh
– vignesh

2015-10-27 08:56:33 +00:00
Commented Oct 27, 2015 at 8:56 — vignesh
– vignesh, Commented Oct 27, 2015 at 8:56

roshini · Accepted Answer · 2015-10-27 11:05:36Z

nice to heard this type of access, i have tried

<acco>hi{{name1}}
    <div ng-controller="SearchMasterController">{{name1}}</div>
</acco>
<acco ng-controller="SearchMasterController">{{name1}}</acco>
<script>
            angular.module('myApp', [])
                    .controller('SearchMasterController', ['$scope', function ($scope) {
                            //My Code
                            console.log("search");
                            $scope.name1 = 'james';
                        }])
                    .directive('acco', function () {
                        return{
                            restrict: 'E',
                            templateUrl: 'acco.html',
                            controller: function($scope) {
                                //My Controller Code
                                console.log("cntrlr fn");
                                $scope.name1 = 'semaj';
                            }
                        };
                    });
</script>

@that time i getting output as

cntrlr fn
search
cntrlr fn

means if we are using like

<acco>hi{{name1}}
    <div ng-controller="SearchMasterController">{{name1}}</div>
</acco>

then we can access both controllers but when we are using like

<acco ng-controller="SearchMasterController">{{name1}}</acco>

we can't access SearchMasterController and it's not loaded also..

Tasnim Reza · Accepted Answer · 2015-10-27 10:57:15Z

0

Yes you can use some different controller for your directive, but there is some best practice

Use controller when you want to expose an API to other directives. Otherwise use link.

The way you tried to use controller doesn't make much sense

<!--here acco and ng-controller both are directives,
    in your directive's 'ControllerFunction' and ng-controller's 'SearchMasterController'
    has the same controll (scope) for 'acco' rendered html.
    In that case your directive's controller overrite ng-controller functionality.
    So leave 'ng-controller',
    if you need any functionality in your directive
    then pass those functionality using =,&,@-->

<acco ng-controller="SearchMasterController"></acco>

answered Oct 27, 2015 at 10:57

Tasnim Reza

6,0603 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

Angular Controller on Custom Directive

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related