Angularjs:使用子指令设置父指令范围值 [英] Angularjs: set parent directive scope value with child directive
问题描述
我不确定这是不是这样做的方法,但我的目标如下:
- 我有一个父指令
- 在父指令的块内,我有一个子指令,它将从用户那里获得一些输入
- 子指令将在父指令的范围内设置一个值
- 我可以从那里拿走
当然问题是父和子指令是兄弟.所以我不知道如何做到这一点.注意 - 我不想在
中设置数据小提琴:http://jsfiddle.net/rrosen326/CZWS4/
html:
<parent-dir dir-data="显示此数据"><child-dir></child-dir></parent-dir>
Javascript
var testapp = angular.module('testapp', []);testapp.controller('parentController', ['$scope', '$window', function ($scope, $window) {console.log('parentController scope id = ', $scope.$id);$scope.ctrl_data = "不相关的 ctrl 数据";}]);testapp.directive('parentDir', function factory() {返回 {限制:'非洲经委会',范围: {ctrl_data: '@'},模板:'<div><b>parentDir scope.dirData:</b>{{dirData}} <div class="offset1" ng-transclude></div>
',替换:假,转置:真实,链接:函数(范围、元素、属性){scope.dirData = attrs.dirData;console.log("parent_dir 作用域:", scope.$id);}};});testapp.directive('childDir', function factory() {返回 {限制:'非洲经委会',模板:'<h4>开始子指令</h4><input type="text" ng-model="dirData"/></br><div><b>childDir scope.dirData:</b>{{dirData}}</div>',替换:假,转置:假,链接:函数(范围、元素、属性){console.log("child_dir 作用域:", scope.$id);scope.dirData = "不,这个数据!";//默认文本}};});
如果你想要那种通信,你需要在 child 指令中使用 require
.这将需要父 controller
,因此您需要一个 controller
具有您希望子指令使用的功能.
例如:
app.directive('parent', function() {返回 {限制:'E',转置:真实,模板:'<div>{{message}}<span ng-transclude></span></div>',控制器:功能($范围){$scope.message = "原始父消息"this.setMessage = 函数(消息){$scope.message = 消息;}}}});
控制器在 $scope
中有一条消息,你有一个方法来改变它.
为什么一个在 $scope
中,另一个使用 this
?您无法访问子指令中的 $scope
,因此您需要在函数中使用 this
以便您的子指令能够调用它.
app.directive('child', function($timeout) {返回 {限制:'E',要求:'^父母',链接:函数(范围、元素、属性、父控件){$超时(功能(){parentCtrl.setMessage('我是孩子!')}, 3000)}}})
如您所见,该链接通过 parentCtrl 接收第四个参数(或者,如果有多个,则为一个数组).在这里,我们只需等待 3 秒钟,直到我们调用在父控制器中定义的方法来更改其消息.
在这里直播:http://plnkr.co/edit/72PjQSOlckGyUQnH7zOA?p=preview
I'm not sure this is the way to do this, but my goal is the following:
- I have a parent directive
- Inside the parent directive's block, I have a child directive that will get some input from the user
- The child directive will set a value in the parent directive's scope
- I can take it from there
Of course the problem is that the parent and child directives are siblings. So I don't know how to do this. Note - I do not want to set data in the
Fiddle: http://jsfiddle.net/rrosen326/CZWS4/
html:
<div ng-controller="parentController">
<parent-dir dir-data="display this data">
<child-dir></child-dir>
</parent-dir>
</div>
Javascript
var testapp = angular.module('testapp', []);
testapp.controller('parentController', ['$scope', '$window', function ($scope, $window) {
console.log('parentController scope id = ', $scope.$id);
$scope.ctrl_data = "irrelevant ctrl data";
}]);
testapp.directive('parentDir', function factory() {
return {
restrict: 'ECA',
scope: {
ctrl_data: '@'
},
template: '<div><b>parentDir scope.dirData:</b> {{dirData}} <div class="offset1" ng-transclude></div> </div>',
replace: false,
transclude: true,
link: function (scope, element, attrs) {
scope.dirData = attrs.dirData;
console.log("parent_dir scope: ", scope.$id);
}
};
});
testapp.directive('childDir', function factory() {
return {
restrict: 'ECA',
template: '<h4>Begin child directive</h4><input type="text" ng-model="dirData" /></br><div><b>childDir scope.dirData:</b> {{dirData}}</div>',
replace: false,
transclude: false,
link: function (scope, element, attrs) {
console.log("child_dir scope: ", scope.$id);
scope.dirData = "No, THIS data!"; // default text
}
};
});
If you want that kind of communication, you need to use require
in the child directive. That will require the parent controller
so you need a controller
there with the functionality you want the children directives to use.
For example:
app.directive('parent', function() {
return {
restrict: 'E',
transclude: true,
template: '<div>{{message}}<span ng-transclude></span></div>',
controller: function($scope) {
$scope.message = "Original parent message"
this.setMessage = function(message) {
$scope.message = message;
}
}
}
});
The controller has a message in the $scope
and you have a method to change it.
Why one in $scope
and one using this
? You can't access the $scope
in the child directive, so you need to use this
in the function so your child directive will be able to call it.
app.directive('child', function($timeout) {
return {
restrict: 'E',
require: '^parent',
link: function(scope, elem, attrs, parentCtrl) {
$timeout(function() {
parentCtrl.setMessage('I am the child!')
}, 3000)
}
}
})
As you see, the link receives a fourth param with the parentCtrl (or if there is more than one, an array). Here we just wait 3 seconds until we call that method we defined in the parent controller to change its message.
See it live here: http://plnkr.co/edit/72PjQSOlckGyUQnH7zOA?p=preview
这篇关于Angularjs:使用子指令设置父指令范围值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!