Question

假设我有一个范围，左侧显示用户列表，右侧显示当前所选用户的详细信息。

我使用双向绑定创建用户详细信息元素指令，最后得到一个类似于此的指令对象：

{
  restrict: 'E',
  scope: {
    user: "="
  },
  templateUrl: '...',
  controller: function() { ...elided...}
}

在父HTML中，我将此指令用作：

<user-details user="currentUser"></user-details>

当用户选择在左侧更改时，将更新currentUser属性，这会导致指令中的用户属性指向其他对象。 Angular会在用户详细信息指令中重新呈现HTML，但是

（这里是问题）

假设在更改显示的用户时我需要做一些小工作，可能是应该解析为对象的JSON字符串。

我怎么知道绑定对象已经改变（我需要重新解析）？

我试过了：

观看$ scope.user
观察$ attr，＆＃39;用户＆＃39;

控制器和链接功能似乎只被调用一次。

某个地方我一定是在遗漏一些东西。这似乎不应该远离人迹罕至的路径。

Answer 1

您应该使用链接，然后像这样观看user：

{
  restrict: 'E',
  scope: {
    user: "="
  },
  templateUrl: '...',
  link: function(scope) { 
    scope.$watch('user',function(value){
      // Do your stuff here
    });
  }
}

您也可以通过功能观看用户：

scope.$watch(function(){
  retrun scope.user;
}, function(value){
  // Do your stuff here
});

但是它只会在摘要上更新。您可以查看documentation或搜索 angularjs摘要周期。

修改

我忘记了scope参数，因为我只是复制粘贴。

Answer 2

您可以使用$apply作为第三个参数调用链接函数中的true

scope.$watch('user', function(newValue, oldValue) {
     console.log(newValue, oldValue);
}, true);

这会更改“objectEquality”，以便比较用户对象的相等性而不是参考。

或者您可以单独观看您的用户属性：

// suppose there is an user with age and gender properties:

scope.$watch('user.age', function(newValue, oldValue) {
     console.log(newValue, oldValue);
});

scope.$watch('user.gender', function(newValue, oldValue) {
     console.log(newValue, oldValue);
});

// more properties to watch for ...

Angular Directives - 了解绑定到属性的对象何时更改

2 个答案: