角度ng控制器与在指令中构建的控制器

Angular ngController vs Controller constructed within Directive

本文关键字：控制器 构建 指令 ng 角度      更新时间：2023-09-26

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

使用 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 ) {
        }
    };
}]);

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

这仅仅是控制器使用范围/复杂性的问题吗？

使用指令控制器的原因浓缩在一句话中：

创建可重用组件

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

以分页器

为例：分页器需要一些逻辑来通知其他组件(例如网格(当前所选页面已更改，以便网格可以相应地更新。这些逻辑可以写在指令控制器中以供重用。与隔离作用域一起使用时，此作用域与应用程序控制器的作用域不紧密，并且可以轻松地将 pageSize 配置为绑定到应用程序控制器作用域的任何属性。

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

  1. 指令控制器允许注入$element。请注意，虽然目前您也可以将$element注入到普通控制器中，但这样做的做法很糟糕。

    2. 指令

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

指令

控制器允许指令具有功能。由于这些控制器实例在其他指令中可能是"必需的"，因此其他指令可以使用控制器实例在此指令上进行通信/操作。

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

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

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

指令控制器调用 3 次，每次都有自己的作用域。

和ng控制器也有相同的性质。但是ngcontroller也可以在其他指令/html页面中重用。

你也可以把 ngController 放在指令中(我们假设 appCtrl 在任何控制器.js文件中定义(

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

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

父指令 

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 );
        }
    };
}]);
相关文章：