Директива AngularJS без шаблона и общий доступ к обновлениям из родительской области

Question

У меня очень простое требование, когда директива размещена внутри ng-repeat. В этом я хотел бы сменить изменения в директиве, чтобы обновлять пользовательский интерфейс. Значение Я хочу значение Контакт (не только фактический объект ссылки) внутри моей функции ссылки, поэтому я могу отображать пользовательский интерфейс, а также изменять свой интерфейс, когда контакт изменения в родительском ng-repeat.

Я создал очень simplified version того, чего я хотел достичь. У него есть список контактов (после исследования с помощью этого link by Mark Я знаю ng-repeat создает свою собственную область, поэтому я добавил объект с именем deep, который является объектом, не являющимся примитивным), я изо всех сил пытаюсь разобраться в этом. Я также попытался использовать другой возможный вариант. Я не хочу вставлять шаблон в директиву с нулевым классом ng-show/ng-class, потому что бизнес-логика сложна, поэтому проще это сделать с помощью функции ссылок. Я уверен, что это связано с областью и/или $ наблюдаем, но я не знаю, как получить эту сортировку. Также обратите внимание, что это более простая версия того, чего я хотел достичь. Я действительно хочу, чтобы значение этого объекта отображало мой пользовательский интерфейс.

My Fiddle Example Вы увидите, когда вы нажмете «Обновить имя», внешнее повторение будет обновляться без внутреннего.

<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); 
      } 
     ); 
     } 
    } 
    }]); 

Answer 1

Вы можете удалить $ watch в директиве, если вы примете следующий подход.

Вы должны использовать интерполяцию объектов html.push("{{" + attrs['zippy'] + "}}"); вместо сериализованной простой текстовой строки, если вы хотите, чтобы модель была интерполирована и обновлена.

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