AngularJS Directive with no Template and Sharing the updates from parent scope

Question

I have a very simple requirement where a directive is placed inside a ng-repeat in this I wanted to push down the changes to directive so it updates the UI. Meaning I want the value of Contact(not just a string reference actual object) inside my link function so I can render the UI and also change my UI when contact changes in the parent ng-repeat.

I had created a very simplified version of what I wanted to achive. It has a list of Contacts ( After researching with help of this link by Mark I know ng-repeat creates its own scope so I added an object called deep which is an object not primitive) , I am struggling to get this sorted. I also had tried to use other possible option. I dont want to paste a template in directive with ng-show/ng-class stuff because business logic is but tricky so it is easier to do it using link function. I am sure this has to do with scope and/or $observe but I dont know how to get this sorted. Also note this is a simpler version of what I wanted to achieve. I actually want value of that object to render my UI.

My Fiddle Example You will see when you click on Update Name outer repeat gets updated no the inner.

<div>
  <div ng-controller="ContactsCtrl">
    <ul>
        <li ng-repeat="contact in contacts">
            <div zippy="contact">a</div>            
        </li>
    </ul>
    <br />
    <p>Here we repeat the contacts to ensure bindings work:</p>
    <br />
    <ul>
        <li ng-repeat="contact in contacts">
            {{contact.name}} : {{contact.deep}}
        </li>
    </ul>    
  </div>
</div>



var app = angular.module( 'myApp', [] );
app.controller('ContactsCtrl', function ( $scope ) {      
    $scope.contacts = [
                        { name: 'Sharon',deep:{A:"a"}},
                        { name: 'Steve',deep:{A:"b"}},
                        { name: 'Scott',deep:{A:"c"}}
    ];

    $scope.primitiveTest=function(c){c.name=c.name+c.name; }    
    $scope.objectTest=function(c){c.deep={A:c.deep.A+c.deep.A};  }
});
app.directive('zippy',  ['$compile', function ($compile){
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {       

          /*scope.$watch(attrs.zippy, function(newValue, oldValue){
                alert('asd');
            });

          attrs.$observe('deep',function(val){ alert('asd'); });*/
        scope.$watch(attrs['zippy'],
             function (ideaNode) {      
                 var html = [];
                 html.push('<hr/><div class="clearfix" id="vote-icons" ng-click="primitiveTest('+attrs['zippy']+');" >Update Name </div> - <div class="clearfix" id="vote-icons" ng-click="objectTest('+attrs['zippy']+');">UpdateObject');              
                 html.push('</div>');
                 html.push(JSON.stringify(ideaNode));                
                 element.html(html.join(''));
                 $compile(element.contents())(scope);
             }
        );
      }
    }
  }]);

I am curious if were able to unit test this? – Winnemucca Mar 14 '16 at 21:09 — Winnemucca, Mar 14 '16 at 21:09

score 3 · Answer 1 · answered Aug 30 '13 at 22:12

You can remove the $watch in the directive if you adopt the following approach.

You should use the object interpolation html.push("{{" + attrs['zippy'] + "}}"); instead of the serialized plain text string if you want the model to be interpolated and updated.

app.directive('zippy', ['$compile', function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var html = [];
            html.push('<hr/><div class="clearfix" id="vote-icons" ng-click="primitiveTest(' + attrs['zippy'] + ');" >Update Name </div> - <div class="clearfix" id="vote-icons" ng-click="objectTest(' + attrs['zippy'] + ');">UpdateObject');
            html.push('</div>');
            html.push("{{" + attrs['zippy'] + "}}");
            element.html(html.join(''));
            $compile(element.contents())(scope);
        }
    }
}]);

Working Demo

Thank you! That works . But In my actual example I need the value of attrs['zippy'] which is a multilevel object so I can render the UI based on various attributes in it. Any Idea ? — Kusek, Aug 30 '13 at 23:10
@Kusek If the object is in scope, you can try `html.push("{{" + scope[attrs['zippy']] + "}}");` — zs2020, Sep 04 '13 at 18:53

AngularJS Directive with no Template and Sharing the updates from parent scope

1 Answers1