Angularjs 从另一个指令调用指令隔离作用域中的函数
简单地说，我想从另一个指令访问一个指令的隔离范围 $（element）.scope（）似乎返回父范围，而不是隔离范围。下面的描述有点罗嗦，所以这里有一个例子 下面的html显示了我有一个keydown事件委托指令，另一个指令显示了当突出显示该元素时按下“DOWN”箭头键时我希望执行的代码Angularjs 从另一个指令调用指令隔离作用域中的函数,angularjs,Angularjs,简单地说，我想从另一个指令访问一个指令的隔离范围 $（element）.scope（）似乎返回父范围，而不是隔离范围。下面的描述有点罗嗦，所以这里有一个例子 下面的html显示了我有一个keydown事件委托指令，另一个指令显示了当突出显示该元素时按下“DOWN”箭头键时我希望执行的代码 <body ng-controller="MainCtrl"> <div id="page1" tabindex="-1" key-handler> <a href="" id="
<body ng-controller="MainCtrl">
<div id="page1" tabindex="-1" key-handler>
<a href="" id="testAnchor" class="highlight" on-down="API.setTarget('section0')">HIGHLIGHTED</a>
</div>
</body>
.directive ( 'onDown', [ function ( ) {
return {
restrict: 'A',
scope: {
'action': '&onDown'
},
link: function ( scope, element, attr ) {
// test call when the directive is created to show that it works
scope.action ( );
}
}
}])
.directive ( 'keyHandler', [
function ( ) {
return {
restrict: 'A',
scope: {},
link: function ( $scope, $element, $attr ) {
$scope.$on('$destroy', function () {
$element.unbind ( 'keydown' );
});
$element.bind ( 'keydown', function ( event ) {
e = event || window.event;
if ( e.stopPropagation ) e.stopPropagation ( );
if ( e.preventDefault ) e.preventDefault ( );
var target = e.target || e.srcElement;
var keyCode = e.keyCode;
// find all highlighted elements
var highlightedEl = $('.highlight')[0];
alert ( "highlightedEl " + $(highlightedEl).attr('id'));
switch ( keyCode ) {
case 40:
alert ( "down key pressed");
var downHandler = $(highlightedEl).attr('on-down');
if ( downHandler ) {
alert ( "found down handler");
// trigger the function in the highlighted elements isolated scope
// NOTE: targetScope seems to point to the controller scope rather than the highlighted elements isolated scope
var targetScope = $(highlightedEl).scope();
targetScope.action();
}
break;
}
});
// give focus to this element so it receives all key events
$scope.$evalAsync ( function ( ) {
$element[0].focus();
});
}
}
}
]);
我所知道的解决此问题的最佳方法是使用控制器在指令之间共享信息 创建一个指令，该指令包含一个控制器，该控制器具有一个可用于传递数据的方法。然后创建其他指令，在子指令中使用Require:作为主指令，在子指令中使用link:，以连接并调用“parent”指令上的方法
app
.directive('parentDirective', function(){
return {
restrict: 'E',
replace: true,
template: "<button ng-click='doSomething()'>Do something</button>",
controller: function($scope) {
var somethingsToDo = ['something'];
$scope.doSomething = function() {
alert(somethingToDo.join());
}
this.addSomethingToDo = function(somethingToDo) {
somethingsToDo.push(somethingToDo);
}
}
};
})
.directive('nothingToDo', function() {
return {
restrict: 'A',
require: 'parentDirective',
link: function(scope, element, attrs, controller) {
controller.addSomethingToDo('Nothing');
}
}
}
});
app
.directive（'parentDirective'，function（）{
返回{
限制：'E'，
替换：正确，
模板：“做点什么”，
控制器：功能（$scope）{
var somethingsToDo=['something']；
$scope.doSomething=函数（）{
警报（somethingToDo.join（））；
}
this.addSomethingToDo=函数（somethingToDo）{
要做的事推（要做的事）；
}
}
};
})
.directive（'nothingToDo'，function（）{
返回{
限制：“A”，
require:'parentDirective'，
链接：功能（范围、元素、属性、控制器）{
controller.addSomethingToDo（'Nothing'）；
}
}
}
});
app
.directive('parentDirective', function(){
return {
restrict: 'E',
replace: true,
template: "<button ng-click='doSomething()'>Do something</button>",
controller: function($scope) {
var somethingsToDo = ['something'];
$scope.doSomething = function() {
alert(somethingToDo.join());
}
this.addSomethingToDo = function(somethingToDo) {
somethingsToDo.push(somethingToDo);
}
}
};
})
.directive('nothingToDo', function() {
return {
restrict: 'A',
require: 'parentDirective',
link: function(scope, element, attrs, controller) {
controller.addSomethingToDo('Nothing');
}
}
}
});