Question

我想知道这两种创建控制器的方法的用例是什么：

使用ngController：

myApp.controller('myController', ['$scope', function ( $scope ) {

}]);

使用controller属性在指令中构造控制器：

myApp.directive ( 'myDirective', [ '$window', function( $window ) {
    return {
        restrict: 'A',
        controller: [ '$scope', function( $scope ) {

        }],
        link: function( scope, element, attrs ) {

        }
    };
}]);

如果在同一元素上调用控制器，是否有任何理由不在指令中构造控制器？

这只是一个问题，即控制器的使用/复杂程度如何？

Answer 1

使用指令控制器的原因用一句话压缩：

创建可重用的组件

指令控制器应包含 可以重复使用的组件的逻辑 。使用指令控制器和 隔离范围 是创建可重用组件的方法。

以分页符为例：分页器需要一些逻辑来通知当前所选页面的其他组件（例如网格），以便网格可以相应地更新。这些逻辑可以写在指令控制器 中，以便重用 。与 隔离范围 一起使用时，此范围对于应用程序控制器的范围并不紧密，您可以轻松配置 pageSize < / strong>绑定到应用程序控制器范围的任何属性。

Answer 2

普通控制器（使用ng-controller或路由创建的控制器）与指令控制器之间存在细微差别。

允许指令控制器注入$element。请注意，虽然目前您可以将$element注入普通控制器，但这样做的做法不好。
指令控制器的唯一目的是指令到指令通信。一个非常好的用例是在AngularJS的主页面上显示标签组件。

指令控制器允许指令具有功能。因为这些控制器实例可以在其他指令中“需要” - 其他指令可以使用控制器实例在该指令上进行通信/操作。

将控制器与指令一起使用的唯一原因是，如果要对指令通信执行某种指令。对于其他任何事情，您应该坚持在链接函数中编写所有scope逻辑。

Answer 3

每次调用指令时，指令控制器都会调用我的意思是

<directive id="1"></directive>
<directive id="2"></directive>
<directive id="3"></directive>

指令控制器调用3次，每个都有自己的范围。

ngController也具有相同的性质。但ngcontroller也可以在其他指令/ html页面中重用。

你也可以把ngcontroller放在指令中（我们假设appCtrl在任何controller.js文件中定义）

.directive('directive',function(){
    return{
         scope:{},
         template:"<div>{{hello}}</div>",
         controller:"appCtrl"
    }
})

Answer 4

添加有关在指令控制器中访问方法和值的一些细节：

家长指示

myApp.directive ( 'parent', [ function() {
    return {
        restrict: 'A',
        scope: {},
        controller: [ '$scope', function( $scope ) {
            //this.myVar = ''; //accessible in child directives
            //$scope.myVar = ''; //accessible in template
            $scope.myVar = this.myVar = '';
        }],
        template: '<div data-child> {{myVar}} </div>',
        link: function( scope, element, attrs ) {

            console.log( scope.myVar );

        }
    };
}]);

儿童指令

myApp.directive ( 'child', [ function() {
    return {
        restrict: 'A',
        require: '^parent',
        link: function( scope, element, attrs, ctrl ) {

            console.log( ctrl.myVar );

        }
    };
}]);

Angular ngController vs Controller在Directive中构建

4 个答案: