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.

Answer 1

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..

Answer 2

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>