10

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

使用 ngController：

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

}]);

在具有控制器属性的指令中构造控制器：

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

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

        }
    };
}]);

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

这仅仅是控制器的广泛使用/复杂程度的问题吗？

4

4 回答 4

8

使用directive controller的理由浓缩为一句话：

创建可重用组件

指令控制器应包含可重用的组件逻辑。将指令控制器与隔离范围一起使用是创建可重用组件的方法。

以分页器为例：分页器需要一些逻辑来通知其他组件（例如网格）当前选择的页面发生了变化，以便网格可以相应地更新。这些逻辑可以写在指令控制器内部以供重用。与隔离范围一起使用时，此范围与应用程序控制器的范围不紧密，您可以轻松配置pageSize以绑定到应用程序控制器范围的任何属性。

于 2013-10-07T14:28:16.637 回答
5

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

  1. 一个指令控制器被允许注入$element。请注意，虽然目前您也可以注入$element普通控制器，但这样做是不好的做法。

  2. 指令控制器的唯一目的是用于指令到指令的通信。AngularJS 的主页上展示了一个非常好的用例，用于选项卡组件。

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

使用带有指令的控制器的唯一原因是，如果您想做某种指令来指令通信。对于其他任何事情，您可能应该坚持scope在链接函数中编写所有逻辑。

于 2013-10-07T13:30:04.927 回答
0

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

父指令

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

        }
    };
}]);
于 2014-05-28T17:59:56.133 回答
0

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

<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"
    }
})
于 2013-10-09T04:42:05.730 回答