AngularJS isolated scope variable in directive not being set -


i have directive looks this:

return {                 restrict: 'a',                 replace: true,                 scope: {                     personid: '@',                     relationshipid: '@',                     relationshipcolumnsshown: '@',                     personcolumnsshown: '@'                 },                 templateurl: 'app/views/communication/displaylist.html',                 controller: controller,                 require: ['$scope', 'communicationlogdataservice']             }; 

you can see there property called personid, setting in parent directive using above directive this

<div data-display-communication-log="" data-personid="currentperson.id" data-relationship-columns-shown="true" data-person-columns-shown="false"> </div> 

you can see personid being set currentperson.id property parent directive. in child directive have watch setup on personid value. watch getting hit once when child directive first loaded , value undefined. when first loaded currentperson on parent doesn't exist yet because loaded async. in parent (not sure if causing problem).

so question how can pass id of currentperson parent personid of child?

when use @ binding isolate scope, gives string value of attribute, not evaluate expression. made couple changes fiddle make work. needed ng-app added, change attribute name on directive (camel case doesn't work in template attribute names) , put double curlies around expression evaluated. added input element can see data updated, don't need watch in situation. here result:

http://jsfiddle.net/pkqun/3/

<div ng-app="myapp" ng-controller="myctrl">       <input ng-model="currentlog.relationshipid"></input>       <div>           *<div data-personselect="" data-relationship-id="{{ currentlog.relationshipid }}"></div>*       </div> </div>  var myapp = angular.module('myapp',[]);  myapp.directive('personselect', function() {     return {         template: '<span> test {{ relationshipid }}<span>',             restrict: 'a',             replace: true,             scope: {                 relationshipid: '@'             }         }; });  function myctrl($scope){     $scope.currentlog = {};     $scope.currentlog.relationshipid = 123; } 

though prevent directive modifying parent scope, think clearer use '=' isolate scope binding instead of '@', don't need curlies around attribute value.


Comments

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

java - Copying object fields -

c++ - Clear the memory after returning a vector in a function -