在Angularjs指令

Question

我将我的指令（属性）应用于同一文件中的两个模态。 我的指示：

.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
                    }
                    });
            }
        };
});

我在我的控制器上有这个范围（所以它意味着rootscope的子范围，也是指令内创建的范围的父母的父范围）。

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

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

为什么这是hapening？我应该通过scope.$parent.$parent.$parent吗？

Answer 1

是的，您在示例中详尽地展示了原型链的工作原理。继承仅在一个方向上起作用。要克服原型继承的这种行为，您应该在范围上定义对象，而不是函数。 E.g。

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

这种方式scope.obj.dismiss在子范围和父范围内都是相同的，除非重新分配scope.obj。

通过这种方式或使用scope.$parent在指令中使用来自父控制器的函数或数据通常不是一个好习惯。指令的require，服务和$broadcast / $emit是Angular中更合适的互操作方式。