angularjs - Two way binding in a directive that triggers a watch even after the data changes again? -
i'm writing directive lookup value list of data , display value. why when click change data button in plunkr example not change result? i've tried $watch fires once.
plunk: http://plnkr.co/edit/9a3z0kmm8eabngyv1nmh?p=preview
for example, here usage:
<lookup-binder lookup="lookuplist" find="data.id" result="lookuplist.description"></lookup-binder>
here directive looks like:
app.directive('lookupbinder', function() { return { restrict: 'e', scope: { lookup: '=', find: '=', result: '=' }, controller: function($scope){ console.log('controller fired'); }, link: function(scope, element, attrs, tabsctrl) { console.log('link fired') scope.$watch(scope.find, function(newvalue, oldvalue) { console.log('watch fired'); var el = _.find(scope.lookup, { id: scope.find }); if(el != null){ scope.result = el.description; } }); }, template: 'lookup binder: <br/> lookuplist: {{lookup}} <br/> find: {{find}} <br/> result: {{result}} <br/>' }; });
controller:
var appname = angular.module('app', []); angular.module('app').controller('testcontroller', testcontroller); testcontroller.$inject = ['$scope']; function testcontroller($scope) { $scope.gradelevels = [{ id: '1', description: 'kindergarden' }, { id: '2', description: 'first grade' }]; $scope.gradelevel = { gradelevelid: '1', record: 'test1' }; console.info('gradelevels[0].id = ' + $scope.gradelevels[0].id); console.info('gradelevel.gradelevelid = ' + $scope.gradelevel.gradelevelid); }
scope's $watch
function takes either string or function, change either 1 of them:
scope.$watch('find', function(newvalue, oldvalue) { ... }
also, result of _.random
number, , ids strings, change random string:
$scope.data.id = _.random(1,4).tostring();
check plunker
Comments
Post a Comment