自定义指令上的角度控制器答案

【问题标题】：Angular Controller on Custom Directive自定义指令上的角度控制器
【发布时间】：2015-10-27 08:09:04
【问题描述】：

这是我的controllers.js 文件

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

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

})(window, angular);

这是我的directives.js 文件

(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);

现在我的问题是，我可以将这个acco 指令与一些不同的控制器一起使用吗？理想情况下，有什么办法让它像这样工作

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

我试过了，

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

它似乎有效。

可以用吗

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

后一种选择在我看来很难看。

【问题讨论】：

检查这个：stackoverflow.com/questions/19444414/…

标签： javascript angularjs

【解决方案1】：

很高兴听到这种访问方式，我已经尝试过

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

@那个时候我得到输出

cntrlr fn
search
cntrlr fn

表示如果我们使用like

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

然后我们可以访问两个控制器，但是当我们使用 like 时

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

我们无法访问 SearchMasterController 并且它也没有加载..

【讨论】：

【解决方案2】：

是的，你可以为你的指令使用一些不同的控制器，但是有一些 best practice

当您想将 API 公开给其他指令时，请使用控制器。否则使用链接。

你尝试使用控制器的方式没有多大意义

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

【讨论】：