请参阅此小提琴以获取完整示例:http://jsfiddle.net/lesouthern/WnvjF/7/
.directive('redirectEnterKey',function() {
return {
restrict : 'A',
controller : function() {}
}
})
.directive('redirectEnterKeyTo', function() {
return {
restrict : 'A',
require : '^redirectEnterKey',
link : function($scope,$element) {
$scope.enterKeyElement = $element;
}
}
})
.directive('redirectEnterKeyFrom', function() {
return {
restrict : 'A',
require : '^redirectEnterKey',
link : function($scope,$element) {
$element.keypress(function($event) {
if($event.keyCode == '13') {
$scope.enterKeyElement.click();
$event.stopPropagation();
$event.preventDefault();
}
});
}
}
});
我想将变量“enterKeyElement”的范围隔离到指令redirectEnterKey,redirectEnterKeyTo和redirectEnterKeyFrom。
但是,想要使用“pageCtrl”在变量“myInput”上共享范围。
我可以这样做吗?而不必在这些指令中引用“myInput”?这是最佳做法吗?
谢谢!
答案 0 :(得分:0)
您的问题对我来说并不完全清楚,但我认为您可以从父作用域创建独立作用域,只需要从父作用域中包含一些属性,例如我已将myInput属性添加到隔离作用域,这将引用ng-model属性父母的
.directive('redirectEnterKeyFrom', function() {
return {
scope:{myInput'=ngModel'}
restrict : 'A',
require : '^redirectEnterKey',
link : function($scope,$element) {
$element.keypress(function($event) {
if($event.keyCode == '13') {
$scope.enterKeyElement.click();
$event.stopPropagation();
$event.preventDefault();
}
});
}
}
});
答案 1 :(得分:0)
感谢您帮助我,您给了我一些好的线索。这是一个很好的角度范围教育。
请原谅我不完整的问题。以下是此处问题的另一个示例:http://jsfiddle.net/lesouthern/jJ2Rj/
请注意,由于共享范围,隐藏了错误的输入。
这是我自己的问题的答案:http://jsfiddle.net/lesouthern/FZXUP/,对于任何有帮助的人。
基本上每个指令都有自己的作用域,并且可以通过父指令'redirectScopeExample'
绑定到父控制器var pageModule = angular.module('pageModule',[])
.controller('pageCtrl',['$scope',function($scope) {
}])
.directive('redirectScopeExample',function() {
return {
restrict : 'A',
scope : {
hideElement : '&',
redirectScopeExampleInput : '=ngModel'
},
controller : function($scope) {
}
}
})
.directive('redirectScopeExampleTo', function() {
return {
restrict : 'A',
require : '^redirectScopeExample',
link : function($scope,$element,$attr) {
$element.click(function() {
$scope.hideElement.toggle();
});
}
}
})
.directive('redirectScopeExampleFrom', function() {
return {
restrict : 'A',
require : '^redirectScopeExample',
link : function($scope,$element,$attrs) {
$scope.hideElement = $element;
}
}
});