javascript - angularjs指令在链接函数内使用参数

Question

这可能是一个愚蠢的问题，但我已经坚持了好几天了，谷歌搜索的解决方案都不适合我。

我正在按照指令驱动的方法编写一个 Angular 1.4 应用程序，因此对于任何实体，我都有一个或多个小部件:

• 隔离范围
• Controller 为
• bindToController true

问题在于“用户拥有东西”的多样性。

<user-widget>
   <stuff-widget userid="user._id"></stuff-widget>
</user-widget>

用户 ID 很好地传递到小部件中，但我想在东西小部件的链接函数中使用它，因为东西非常复杂，并且在现实世界中我还需要获取各种其他部分。

我尝试了各种方法来获取 userid 值(正如各种其他 stackoverflow 讨论和网络上其他地方所建议的那样)

• 使用双向绑定(bind) -> 无效
• 通过作用域和 Controller 尝试 -> userid、uid 未定义
• 需要 ^userWidget -> 无法访问我的 Controller
• 使用 attrs.$observe('userid', ....) -> js 错误:userid 未定义
• 通过父级的预链接传递它 -> 确实有效，但不是一个好主意/优点有限

我有一个笨蛋，里面有我尝试过的各种东西:http://plnkr.co/edit/SqlhYSteCDxMaAVZWCsy?p=info

小部件看起来像这样(工作前链接变体)

  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);
      }
    };
  } 

我是一个 Angular 初学者(第一个严肃的项目)，到目前为止我的经验是:“如果很难弄清楚，那么你可能做错了方法”。

所以，

• 我是否错过了访问链接函数内参数的明显方法？
• 我是否因为错误地将它们转移到我的设置而搞砸了我尝试的方法(尤其是 $observe)？
• 我应该将 Controller 调用粘贴到模板中并完成它吗？
• 我应该以完全不同的方式解决这个问题吗？编译功能？ Controller 功能？还有什么我还不熟悉的其他 Angular 深度？

Answer 1

链接函数完成执行后，您必须等待一个摘要周期才能更新与指令使用范围隔离的范围中的值。

您可以在 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);
  });
}