AngularJS personnalisé directive $la montre ne fonctionne pas

Je suis entrain de créer une application démo avec deux contrôleurs de communiquer au moyen d'un service contenant des données. C'est une sorte de carnet de contacts. L'utilisateur peut le modifier à la personne sélectionnée de la liste.

Les données sont stockées dans le tableau d'objets et j'utilise un custom directive pour effectuer certaines manipulations avec des objets propriétés de texte.

Le problème, c'est qu'un texte rendu dans la liste à l'aide de la coutume de la directive n'est pas mis à jour sur le changement du modèle (lorsque vous tapez quelque chose dans les champs de nom), tandis qu'un texte qui est placé à l'aide de {{}} les changements lors de la frappe.

Voici un exemple montrant un problème:

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>

De travail de démonstration: http://cssdeck.com/labs/ejnhuqf9

Peut-être que le problème est avec $regarder, mais tout semble ok. Toutes les suggestions?

P. S. Dans la vraie application, j'ai besoin d'utiliser la directive de ne plus complexe de la manipulation d'un texte que juste de concaténation.

OriginalL'auteur VIK | 2014-04-14