angularjs - How can I watch a directive variables from a parent controller? -
i have controller called main has 2 nested directives called formdirective , datadirective.
i have following form in formdirective view.
<form name="menuform"> <h4>what name</h4> <input name="name" ng-value="" ng-model="name"> </form> i trying use $scope.watch update data in datadirective when form value changed in formdirective.
when put following code inside formdirective controller works fine.
$scope.$watch('[menuform.name.$viewvalue]', function () { console.log('name changed'); //update data directive here }, true); however won't work solution because need code inside parent controller directives need communicate each other , doing way cause encapsulation issues.
when put following watcher inside main controller doesn't work - expect too. (i can browse fine web inspector).
$scope.$watch('[$scope.menuform.name.$viewvalue]', function () { console.log('name changed'); //update data directive here }, true); is able tell me how can watch formdirectives variable main controller?
adding watch inside mainctrl should work when $scope removed.
change: $scope.$watch('[$scope.menuform.name.$viewvalue]' $scope.$watch('[menuform.name.$viewvalue]'
another option pass callback directive.
example fiddle: http://jsfiddle.net/rfkjlst3/13/
html
<div class="m" ng-controller="mainctrl"> <div>main ctrl</div> <h3>(shared scope)</h3> <directive1></directive1> <directive2></directive2> <hr /> <h3>(isolate scope)</h3> <directive3 on-update="onupdate(newval, oldval, $scope)"></directive3> <directive4 some-var="updatevar"></directive4> </div> main ctrl
function mainctrl($scope) { // shared scope $scope.name = ''; $scope.latestvalue = ''; $scope.onchangefn = watchfn; // callback shared scope directive // watching main ctrl $scope.$watch('[menuform.name.$viewvalue]', mainctrlwatch, true); // isolate scope $scope.updatevar = ''; $scope.onupdate = function updatefn(newvalue, oldvalue) { $scope.updatevar = newvalue || ''; console.log('hi',newvalue, oldvalue, $scope); } } shared scope directives
app.directive('directive1', function ($window) { var directive = { link: link, restrict: 'ea', template: '<div class="d"><b>directive 1</b>' + '<form name="menuform">' + '<label for="name">what name: </label>' + '<input name="name" ng-value="" ng-model="name" required>' + '</form></div>' }; return directive; function link(scope, element, attrs) { // watch inside directive working using shared scope scope.$watch('[menuform.name.$viewvalue]', scope.onchangefn, true); } }); app.directive('directive2', function ($window) { //notice no scope: { ... } scope parents. var directive = { link: link, restrict: 'ea', template: '<div class="d d2"><b>directive2</b> <br /> {{ latestvalue }}</div>' }; return directive; function link(scope, element, attrs) {} }); isolate scope directives
app.directive('directive3', function ($window) { var directive = { link: link, restrict: 'ea', scope: { onupdate: '&' }, template: '<div class="d"><b>directive 3</b>' + '<form name="menuform">' + '<label for="name">what name: </label>' + '<input name="name" ng-value="" ng-model="name" required>' + '</form></div>' }; return directive; function link(scope, element, attrs) { scope.name = ''; // watching inside directive , firing callback scope.$watch('[menuform.name.$viewvalue]', function (newval,oldval,$scope) { $scope.onupdate({newval: newval, oldval: oldval}); }, true); } }); app.directive('directive4', function ($window) { var directive = { link: link, restrict: 'ea', scope: { somevar: '=' }, template: '<div class="d d2"><b>directive4</b> <br /> {{ somevar }}</div>' }; return directive; function link(scope, element, attrs) {} });
Comments
Post a Comment