[英]angularjs directive use parameter inside link function
This is probably a stupid question, but I have been stuck on it for days and neither of the googled solutions panned out for me. 这可能是一个愚蠢的问题,但是我已经坚持了好几天,而谷歌解决方案都没有为我解决。
I'm writing an angular 1.4 app following a directive driven approach, so for any entity I have one or more widgets: 我正在按照指令驱动的方法编写一个angular 1.4应用程序,因此对于任何实体,我都有一个或多个小部件:
The problem is of the "user has stuff" variety. 问题在于“用户拥有东西”的多样性。
<user-widget>
<stuff-widget userid="user._id"></stuff-widget>
</user-widget>
The userid passes nicely into the widget, but I would like to use it inside the stuff widget's link function, because stuff is really complicated and in the real world I need to grab various other parts as well. 用户ID很好地传递到了小部件中,但是我想在东西小部件的链接函数中使用它,因为东西确实很复杂,在现实世界中,我还需要抓住其他各个部分。
I tried various methods to get to the userid value (as suggested in various other stackoverflow discussions and elsewhere on the web) 我尝试了各种方法来获取用户ID值(如各种其他stackoverflow讨论和网络其他地方所建议的那样)
I have a plunker with the various things I tried: http://plnkr.co/edit/SqlhYSteCDxMaAVZWCsy?p=info 我对尝试过的各种方法都一无所知: http ://plnkr.co/edit/SqlhYSteCDxMaAVZWCsy?p=info
The widgets look like this (working pre link variant) 小部件如下所示(工作前链接变体)
function userWidget() {
return {
restrict: 'EA',
scope:{},
template: '<h2>User</h2> {{user.name}}<stuff-widget userid="user._id"></stuff-widget>',
replace: false,
controllerAs: 'userCtrl',
bindToController: true,
controller: 'UserCtrl',
link: { // this actually works, not sure wether this a good idea
pre: function preLink(scope, element, attrs, ctrl) {
var uid = 1;
scope.user = ctrl.findById(uid);
scope.userid = scope.user._id;
},
post: function postLink(scope, element, attrs, ctrl) {}
}
};
}
function stuffWidget() {
return {
restrict: 'EA',
scope: {
uid: '=userid'
},
template: '<h3>User stuff</h3>stuffCtrl.userid inside widget: {{stuffCtrl.userid}}<div ng-repeat="stuff in stuffCtrl.userStuff">\
User id: {{stuff.userid}}: {{stuff.stuff}}\
</div>',
replace: false,
controller: 'StuffCtrl',
controllerAs: 'stuffCtrl',
bindToController: {
userid: '='
},
link: function (scope, element, attrs, ctrl) {
console.log('stuff ctrl userid:', ctrl.userid); // not defined
console.log('stuff scope uid:', scope.uid); // not defined
console.log('Scope parent userid: ',scope.$parent.userid); // undefined
// didn't work either - userid not defined
/* attrs.$observe('userid', function(value) {
if (value) {
ctrl.userid = userid;
console.log('stuff ctrl userid observed:', ctrl.userid);
}
}); */
ctrl.userStuff = ctrl.findByUserId(ctrl.userid);
}
};
}
I'm an angular beginner (first serious project) and so far my experience has been: "if it's hard to figure out, you are probably doing it the wrong way". 我是一个有经验的初学者(第一个认真的项目),到目前为止,我的经验是:“如果很难弄清楚,您可能做错了方法”。
So, 所以,
After the link function has finished its execution you will have to wait one digest cycle to update the values in the isolated scope from the scope where the directive is used. 链接功能执行完后,您将必须等待一个摘要周期才能从使用指令的范围中更新隔离范围中的值。
You can try this snippet in stuffWidged : 您可以在stuffWidged中尝试以下代码段:
link: function(scope, element, attrs, ctrl) {
var uid, usrStuff;
scope.uid; // it is normal to be undefined here
scope.$watch('uid', function(newUid) {
uid = newUid;
scope.uid; // is ready and is same as newUid
usrStuff = ctrl.usrStuff = scope.usrStuff =
ctrl.findById(uid);
});
}
<user-widget widgetusers="model.users"></user-widget>
then user-widget template will be: 然后,用户小部件模板将为:
<stuff-widget ng-repeat="stuffuser in widgetusers" userid="stuffuser._id"></stuff-widget>
<user-widget userid="user._id"> <stuff-widget userid="userid"></stuff-widget> </user-widget>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.