Question

我认为我对如何正确构建自定义指令感到困惑 - 即何时在指令中使用控制器。如果他们使用隔离范围并从其父控制器传递给他们的属性，这很好。

但是，我认为指令应该被视为可重用的组件，因此有必要让自己的控制器来设置辅助方法，范围变量等，就像在常规控制器中一样。例如，我有一个自定义指令，在我使用ng-show的模板中。条件使用我在指令控制器中编写的方法检查范围属性。

<div>
    <div ng-show="isLong()"></div>
</div>

在指令中，我在控制器中设置了isLong：

angular.module('myApp')
    .directive('myDirective', [function () {
        return {
            restrict: 'A',
            controller: function($scope, $element, $attrs){
                $scope.isLong = function(){
                    return true;
                }
            }
        };
    }]);

虽然我没有找到任何关于指令的Angular文章，这些指令讨论了指令的使用。我该如何使用它们？在上面的例子中，从指令的模板中我应该如何使用ng-show？

任何指导意见。我试图以正确的方式使用Angular。

Answer 1

第二个参数不正确

angular.module('myApp')
    .directive('myDirective', function () {
        return {
            restrict: 'A',
            controller: function($scope, $element, $attrs){
                $scope.isLong = function(){
                    return true;
                }
            }
        };
    });

如果你不注入不同的服务，你必须在数组中注入它们

angular.module('myApp')
    .directive('myDirective', ['someService', function (someService) {
        return {
            restrict: 'A',
            controller: function($scope, $element, $attrs){
                $scope.isLong = function(){
                    return true;
                }
            }
        };
    });

Answer 2

指令控制器在编译阶段后执行。这意味着当任何指令控制器函数运行时， all 指令已经被编译和转换。
在指令（或其任何子代）链接之前调用指令控制器函数。这使得在链接指令之前初始化范围成为一个方便的位置，这样您的绑定在第一次调用$ watch处理程序之前就具有明确定义的值。

请记住，当您在指令范围内定义变量或方法时，可以在指令的HTML中参与数据绑定。子指令也可以访问指令的范围，只要它们的范围设置为原型继承范围 - 意味着父范围的范围变量可以通过范围继承由子范围继承。

AngularJS - 关于指令的困惑

2 个答案: