【问题标题】:Is it possible to call functions from parent directive controller, when subsidiary directive has isolated scope当子指令具有隔离范围时,是否可以从父指令控制器调用函数
【发布时间】:2013-09-03 10:37:54
【问题描述】:

这里是 jsfiddle.net 示例我的情况。

app=angular.module("app",[]);

app.directive("submitForm",function(){
    return{
        scope:{},
        restrict: 'A',
        controller:function($scope, $element){
            $scope.submitted=false;

            this.submit=function(){
                $scope.submitted=true;
            };
            this.getSubmit=function(){
                return $scope.submitted;
            };
            this.submitOn=function(){
                return $scope.$broadcast("submitOn");
            };
        },
        link: function(scope, element, attrs,ctrl){
            element.find("button").on("click",function(){
                scope.submitted=true;
                ctrl.submitOn();
            });
        }
    }
})
.directive('errorRender',function(){
    return{
        restrict: 'A',
        //scope: {},
        require:['ngModel','^submitForm'],
        controller: function($scope, $element){
            $scope.$broadcast("requireErrorEnable");

            $scope.$broadcast("requireErrorDisable");

            $scope.$broadcast("maxlengthErrorEnable");

            $scope.$broadcast("maxlengthErrorDisable");
        },
        compile: function compile(tElement, tAttrs) {

            return function postLink(scope, element, attrs, ctrl) {
                modelCtrl=ctrl[0];
                formCtrl=ctrl[1];

                scope.$on("submitOn",function(){
                    alert("submitOn!!!");
                });

                scope.$on("requireErrorEnable",function(){
                    element.attr("placeholder","error");
                });

                scope.$on("requireErrorDisable",function(){
                    element.attr("placeholder","");
                });

                scope.$watch(function(scope){
                        return ctrl[0].$error.required;
                    },
                    function(newValue, oldValue, scope){
                        if(ctrl[0].$error.required){
                            if((ctrl[0].$dirty && !ctrl[0].$viewValue)){
                                scope.$emit("requireErrorEnable");
                            }
                        }else{
                            scope.$emit("requireErrorDisable");
                        }
                    });
            }
        }
    }
});

如果我在隔离范围内使用指令 errorRender,在这种情况下我无法触发指令控制器的函数 submitForm。否则所有指令 errorRender 会同时触发(正如我们所料)。

【问题讨论】:

  • 您是说要在给定一个独立范围的情况下从父指令调用子指令的函数?
  • 没有。我想从子指令scope.$on("submitOn",function(){ alert("submitOn!!!"); }); 调用父指令的函数

标签: javascript angularjs angularjs-directive angularjs-scope


【解决方案1】:

指令可以通过您正确指定的require 属性共享控制器。这就是指令上的Angular's docs 关于访问指令控制器的内容(强调):

"require - 需要另一个指令并将其控制器作为链接函数的第四个参数注入。require 接受一个字符串名称(或字符串数组)要传入的指令。如果使用数组,则注入的参数将是相应顺序的数组。如果找不到这样的指令,或者该指令没有控制器,则引发错误”

恕我直言,当应用于您的案例时,这意味着注入控制器的链接函数是您的子指令中的一个,而不是父指令中的函数

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-10-12
    • 2015-03-20
    • 1970-01-01
    • 1970-01-01
    • 2013-07-09
    • 1970-01-01
    相关资源
    最近更新 更多