AngularJS - Watch for model of transcluded element -


in angularjs, have directive basic transclusion. know transcluded input or textarea when using it, , if there, want $watch model changes. don't have access attribs of transcluded content, access attribs of root element directive called on. transcluded scope (maybe scope.$$nextsibling can tells me it's way hell :) ).

so there way without adding parameter (attribute) element directive called?

directive template

<div ng-transclude>     <somecontent>...</somecontent>     <!-- here input transcluded --> </div> 

directive usage

<div my-directive="somedata">                           //this attribs accessable     <input ng-model="iwanttowatchthisinmydirective" />  //but want access </div> 

here solution:

i created second directive: input (restricted element, every input has one). in input directive broadcast every change element's scope:

link: function (scope, element: jquery, attrs: ng.iattributes) {   if(typeof attrs.ngmodel !== "undefined") {     scope.$watch(attrs.ngmodel, function (newvalue, oldvalue) {       scope.$broadcast('valuechanged'+scope.$id, newvalue, oldvalue);     });   } } 

scope.$id used sure event name unique every input.

now, in other directive can listen event of changing input:

link: function (scope, element:jquery, attrs:ng.iattributes) {   //my input last child everytime..   var children = element.find("input");   var lastinput = angular.element(children[children.length - 1]);    var lastinputscope = lastinput.scope();    var unregister = lastinputscope.$on('valuechanged' + lastinputscope.$id,                                        function (event, newvalue, oldvalue) {     //do whatever want...   });    scope.$on('$destroy', function () {     unregister();   }); } 

Comments