Question

我正在尝试创建一个需要使用单独控制器的自定义指令，因为它需要具有可由子指令调用的函数。

到目前为止，这是我的代码：

angular.module('myDirectives').controller('SlideInMenuController', function ($scope, $element, $attrs) {

    $scope.isOpen = false;

    // Toggle Function
    this.toggle = function(){

        $scope.$apply(function(){
            $scope.isOpen = !$scope.isOpen;
        });

    };


    // Watch $scope.isOpen and open the menu
    $scope.$watch('isOpen', function() {

        if($scope.isOpen == true){
            $element.attr('is-open', true);
        }
        else{
            $element.attr('is-open', false);
        }

        return false;

    });

}

angular.module('myDirectives').directive('slideInMenu', function ($swipe) {

    return {

        restrict: 'EA',
        scope: {},
        controller:'SlideInMenuController'        

    };

});


angular.module('myDirectives').directive('slideInMenuToggle', function ($swipe) {

    return {

        restrict: 'EA',
        require: '^slideInMenu',

        link: function ($scope, $element, $attrs, SlideInMenuCtrl) {

            $element.bind('click', function(){
                SlideInMenuCtrl.toggle();
            });

        }        

    };

});

（注意：我正在使用ng-annotate，因此我不必两次编写所有依赖项）

我需要将$ swipe服务注入指令控制器，但普通控制器不会将$ scope，$ element，$ attrs作为前三个参数。这让我想知道我是否应该把它们放到链接函数中并在那里做DOM的东西，但是如果我这样做那么控制器中的内容以及链接函数的内容。

我已经阅读了大量的博客和SO答案，说明了什么样的编译/链接/控制器运行，但仍无法找到一个明确的答案，我上面的例子应该去哪里。

真的很感激任何帮助。

Answer 1

AngularJS有两种功能。这两者都不是直接调用的。

1） Injectables ：接收参数的函数，其名称必须（除少数例外）在依赖注入子系统中注册。 这是ng-annotate存在的原因。您也可以使用数组表示法。

angular.module('stackOverflow').service('answer', ['myService', function(myService) {
...
}]);

一些示例是您传递给angular.module()函数的示例，例如service()，factory()，directive()，controller()。

2）普通功能。这些没有特殊处理，它是vanilla JavaScript。它们被传递给指令定义对象中的链接和编译槽。

如果你没有使用最右边的参数，你可以省略它们，但不能使用其他参数。由于参数的顺序是固定的，因此您无法对它们进行重新排序。但你可以随心所欲地打电话给他们。

这就是功能。

关于使用$ 的约定：小心！ AngularJS内置服务以$为前缀，因此您应该以这种方式为可注入函数命名参数。对于所有其他情况，请不要使用$：您自己的函数和位置参数作为前缀，就像您在link（）和compile（）中看到的那样。 这些功能中带有$的前缀会产生误导和错误的指导。

为了更好地区分compile（）和link的参数，您可以使用t作为模板前缀，例如i。现在我更喜欢使用那些没有前缀的。移动它们会更好。

compile: function (tElement, tAttrs) { return function link(scope, iElement, iAttrs, ctrls) { }; }

哪些参数传入Angular JS自定义指令控制器？

1 个答案: