AngularJS自定义指令$ watch无效

Question

我正在创建一个演示应用程序,其中两个控制器通过包含一些数据的服 这是一本通讯录.用户可以从列表中编辑所选人员.

数据存储在对象数组中,我使用自定义指令对该对象的文本属性执行一些操作.

问题是,使用自定义指令在列表中呈现的文本在模型更改时(在名称字段中键入内容时)不会更新,而使用{{}}放置的文本在键入时会更改.

以下是显示问题的示例:

JS

var contacts = angular.module('contacts', []);

contacts.service('database', ['$rootScope', function ($rootScope) {
  return {
    db : [
    {person:{fName:"John", lName:"Williams"}, phone:"11111111111"},
    {person: {fName:"Sara", lName:"Lewis"}, phone:"222222222"},
    {person: {fName:"Lana", lName:"Watson"}, phone:"33333333333"},
    {person: {fName:"John", lName:"Smith"}, phone:"4444444444"}  
    ],  
    selectedPerson : null,
    setSelected : function (i) {
      this.selectedPerson = i;
      $rootScope.$broadcast('selected');
    }
  }
}]);

 contacts.controller("listCtrl", function($scope, database) {
  $scope.list = database.db;
  $scope.getSelected = function() {
    return database.selectedPerson;
  };
  $scope.setSelected = function(i) {
    database.setSelected(i);
  }; 
});

contacts.controller("editorCtrl", function($scope, database) {
  $scope.editing = database.selectedPerson;
  $scope.$on('selected', function(event) {
    $scope.editing = database.selectedPerson;
  });
});

contacts.directive('personName', function() {
  return {
    restrict: 'AEC',
    scope:{
      personName: '='
    },
    link: function(scope, elem, attrs) {
      scope.$watch(function(){return scope.personName;}, function(obj) {
        var fullName = obj.fName + " " + obj.lName;
        elem.text(fullName);
      });
    }
  };
});

HTML

<div ng-app="contacts">
  <div class='list' ng-controller="listCtrl">
    <div ng-repeat="i in list"
      ng-click="$parent.setSelected(i)"
      ng-class="{'sel': ($parent.getSelected() === i)}">
      <span person-name="i.person"></span>, {{i.phone}}
    </div>
  </div>
  <div class='edit'  ng-controller="editorCtrl">
    First name: <input type="text" ng-model='editing.person.fName'> <br>
    Last name: <input type="text"  ng-model='editing.person.lName'> <br>
    Phone: <input type="text"  ng-model='editing.phone'> <br>
  </div>
</div>

工作演示:http://cssdeck.com/labs/ejnhuqf9

也许问题出在$ watch上,但一切似乎都没问题.有什么建议？

PS在真正的应用程序中,我需要使用该指令进行更复杂的文本操作,而不仅仅是连接.

Answer 1

将$ watch(objectEquality)的第三个参数设置为true:

  scope.$watch(function(){return scope.personName;}, function(obj) {
    var fullName = obj.fName + " " + obj.lName;
    elem.text(fullName);
  }, true);

您可能希望将属性的名称更改为person,以提醒自己它是整个对象,而不仅仅是字符串名称.