javascript - 将哪些参数传递到 Angular JS 自定义指令 Controller ?

标签 javascript angularjs

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

这是迄今为止我的代码:

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 服务注入(inject)指令 Controller ,但普通 Controller 不会将 $scope、$element、$attrs 作为前三个参数。这让我想知道我是否应该将它们放入链接函数中并在那里执行 DOM 操作,但是如果我这样做, Controller 中的内容以及链接函数中的内容。

我读过很多博客和 SO 答案,它们说明了编译/链接/ Controller 运行的顺序,但仍然找不到关于我上面的示例中的内容应该去哪里的明确答案。

任何帮助将不胜感激。

最佳答案

AngularJS 有两种函数。这两个都不是直接调用的。

1) 可注入(inject):接收参数的函数,其名称必须(有少数异常(exception))在依赖注入(inject)子系统中注册。 这就是 ng-annotate 存在的原因。您还可以使用数组表示法。

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

一些示例是传递给 angular.module() 函数的示例,例如 service()factory()指令() Controller ()

2) 简单函数。这些没有特殊处理,它是普通的 JavaScript。它们被传递到指令定义对象中的链接和编译槽。

如果您不需要最右边的参数,则可以省略它们,但不能省略其他参数。由于参数的顺序是固定的,因此您无法重新排序它们。但是您可以随意调用它们

这就是函数的内容。

关于使用 $ 的约定:小心! AngularJS 内置服务以 $ 为前缀,因此您应该以这种方式为可注入(inject)函数命名参数。对于所有其他情况,不要以 $ 为前缀:您自己的函数和位置参数,就像您在 link() 和compile() 中看到的那样。 在这些函数中使用 $ 前缀会产生误导和不好的指导

为了更好地区分compile()和link的参数,您可以为模板添加t前缀,例如添加i前缀。现在我更喜欢使用那些没有前缀的。最好移动它们。

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

关于javascript - 将哪些参数传递到 Angular JS 自定义指令 Controller ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29630797/

相关文章:

javascript - 需要使用变量更改 JSON 属性

javascript - 如何使用服务将信息从一个 Controller 共享到另一个 Controller ?

angularjs - 在 angularjs 中如何装饰 $stateProvider Provider?

javascript - 如何让 lodash _.replace 字符串中所有出现的地方?

javascript - Angular - 从函数返回promise.then

javascript - 具有动态长度的 Angular 中的 Bootstrap Accordion

javascript - 在 jsp 页面主体中 onload 函数无法从 jquery 对话框加载

javascript - AngularJS - html select 的数据绑定(bind)默认值

angularjs - 如何读取 AngularJS 中 ArrayBuffer 中的二进制数据?

javascript - 在 angularjs 中遍历字符串化的 json 数据返回未定义