javascript - 更新 Angularjs 指令中的整个原型(prototype)链

Question

我正在将指令(属性)应用于同一文件上的 2 个模态。我的指令:

.directive('myModal', function() {
    return {
        scope : true,
        restrict: 'A',
        link: function(scope, element, attr) {
                console.log(scope.dismiss);
                scope.modalElements.push(element);
                scope.dismiss = function(){
                    angular.forEach(modalElements,function(element,key){
                        console.log(element);
                        // element.modal('hide');
                    });
                };
                console.log(scope.dismiss);
                $(element).bind('shown.bs.modal', function () {
                    if (!scope.$root.$$phase){
                        scope.$apply();
                        console.log(scope.dismiss); // the function I want
                        console.log(scope.$parent.dismiss); // the function with alert
                    }
                    });
            }
        };
});

我的 Controller 中有这个作用域(因此它意味着 rootscope 的子作用域，它也是指令内创建的作用域的父作用域的父作用域的父作用域的父作用域)。

$scope.dismiss = function() {alert(1);};

正如您在我的指令中看到的，我正在更新函数解雇。它适用于当前范围级别，但不会更新父范围或原型(prototype)层次结构。

为什么会出现这种情况？我应该通过 scope.$parent.$parent.$parent 吗？

Answer 1

是的，您已经在示例中详尽地演示了原型(prototype)链的工作原理。继承仅在一个方向上起作用。为了克服原型(prototype)继承的这种行为，您应该在作用域上定义对象，而不是函数。例如

scope.obj = {};
scope.obj.dismiss = function() { ... };

这样，scope.obj.dismiss 在子作用域和父作用域中都将相同，除非重新分配 scope.obj。

以这种方式或通过 scope.$parent 在指令中使用来自父 Controller 的函数或数据通常不是一个好的做法。 Directive 的 require、服务和 $broadcast/$emit 是 Angular 内更合适的互操作方式。