Question

我有一个控制器功能，我传递给通用指令（＃1）。在泛型指令模板中，我有另一个特定的指令（＃2），我传递相同的控制器函数。

问题似乎是泛型指令（＃1）在接收到它时会破坏控制器方法，因此不会将它正确地传递给泛型指令模板中的特定指令（＃2）。

var myApp = angular.module('myApp',[])

.controller('myctrl', ['$scope', function($scope) {
    $scope.ctrlfunc = function(myvar) {
         console.log(myvar);   
    }
}])

.directive('mydir1', function() {
    return {
        template: '<div mydir2 dirfunc="dirfunc"></div>',
        scope: {
            dirfunc: '&'
        }
    }
})

.directive('mydir2', function() {
    return {
        template: '<button ng-click="onClick()">click</button>',
        scope: {
            dirfunc: '&'
        },        
        link: function(scope) {   
            scope.onClick = function() {
                scope.dirfunc({myvar:'hello'});
            }
        }
    }
})

如果我将特定指令的范围声明更改为＆＃39; =＆＃39;而不是＆＃39;＆＃39;它工作正常。

JSFIDDLE：http://jsfiddle.net/Hgh7D/1/

.directive('mydir2', function() {
    return {
        template: '<button ng-click="onClick()">click</button>',
        scope: {
            dirfunc: '='
        },        
        link: function(scope) {   
            scope.onClick = function() {
                scope.dirfunc({myvar:'hello'});
            }
        }
    }
})

但是我不想这样做，因为它可能并不总是在这个2层指令情况下使用。我希望它能保持＆＃39;＆amp;＆＃39;因为它期待一个功能。这可能吗？

Answer 1

不幸的是使用'＆amp;' （即在dir1中）将导致指令在父范围内运行该函数，因此如果将其传递给另一个子节点，它将不再处于活动状态。一种解决方法是定义dir2的链接函数，如下所示：

link: function(scope, element, attrs) {   
        scope.onClick = function() {
            scope.dirfunc({myvar:'hello'});
        }
        attrs.$observe("dirfunc", function (fn) {
            if ("dirfunc" in scope.$parent) {
                scope.dirfunc = scope.$parent.dirfunc;
            }
        });
    }

$observe中的逻辑允许它在你的分层情况下或者在没有分层的情况下从它的父节点继承。这不是最干净的解决方案，如果它不仅仅是一层深层，它可能无法工作，但它在你的例子中确实有用。

更新了小提琴：http://jsfiddle.net/LyA9w/

如何将控制器函数传递给指令中的指令

1 个答案: