哪些参数要传递到Angular JS自定义指令控制器中？

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，但是如果我这样做，控制器中的内容以及链接函数中的内容。

我已经阅读了许多博客，并给出了运行编译/链接/控制器的顺序的答案，但是仍然找不到关于我上面的示例应该放在哪里的明确答案。

任何帮助将不胜感激。

Answer 1

AngularJS有两种功能。 两者都不打算直接调用。

1）可注入对象 ：接收参数的函数，其名称必须（除了少数例外）已在依赖关系注入子系统中注册。 这就是ng-annotate存在的原因 。 您也可以对它们使用数组符号。

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

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

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

如果您没有使用最右边的参数，则可以省略这些参数，但不要使用其他参数。 由于参数的顺序是固定的，因此无法对其重新排序。 但是您可以随便叫他们 。

函数就是这样。

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

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

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