AngularJS chỉ thị tùy chỉnh $ watch không hoạt động

Question

Tôi đang tạo một ứng dụng demo với hai bộ điều khiển giao tiếp thông qua một dịch vụ có chứa một số dữ liệu. Nó là một loại danh bạ. Người dùng có thể chỉnh sửa người được chọn từ danh sách.

Dữ liệu được lưu trữ trong mảng đối tượng và tôi sử dụng chỉ thị tùy chỉnh để thực hiện một số thao tác với các thuộc tính văn bản của đối tượng đó.

Sự cố là văn bản được hiển thị trong danh sách bằng chỉ thị tùy chỉnh không được cập nhật về thay đổi mô hình (khi nhập nội dung nào đó trong trường tên) trong khi văn bản được đặt bằng {{}} thay đổi trong khi nhập.

Dưới đây là một mẫu cho thấy một vấn đề:

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> 

bản demo làm việc: http://cssdeck.com/labs/ejnhuqf9

Có lẽ vấn đề là với $ xem, nhưng tất cả mọi thứ Dường như ok. Bất kỳ đề xuất?

P.S. Trong ứng dụng thực, tôi cần sử dụng chỉ thị để thực hiện thao tác văn bản phức tạp hơn là ghép nối.

Answer 1

Set tham số thứ ba của $watch (objectEquality) là true:

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

Bạn có thể muốn thay đổi tên của tài sản sang người khác, để nhắc nhở chính mình rằng đó là toàn bộ đối tượng, không chỉ là một chuỗi Tên.