Как передать объектную ссылку на директиву?

Question

В моем приложении у меня есть ng-repeat, который выполняет итерацию через JSON и печатает каждый объект на странице. Так, например, мой ng-repeat печатает животных

[ 
       { 
        name: "horse", 
        sound: "Nay", 
        legs: 4, 
       }, 
       { 
        name: "beaver", 
        sound: "thwack", 
        legs: 2 
       } 
] 

Я также хочу передать каждое животное в директиве и, возможно, добавить ключ, значения для них. Проблема заключается в том, когда я добавить объект животного в качестве атрибута и обновлять его в директиве,

т.е.

<animal this-animal={{animal}}></animal> 

и в функции указания ссылки

var animalObj = scope.$eval(attrs.thisAnimal); 
animalObj["gestation"] = 10; 

не обновляет в оригинальной JSON. Это похоже на то, что он отключается от общего массива всех животных.

Почему? Как сохранить все это вместе? Я хочу обновлять отдельные объекты для внесения изменений в основной объект JSON.

Answer 1

Используя {{model}} в html, он решит это значение и поместит его в HTML. В вашем случае JSON стягивается, а затем закрывается назад, создавая клонированный объект. Вместо использования {{model}} просто передайте имя значения.

<div my-directive="model"> 

Затем доступ к значению модели с помощью $ синтаксического

module.directive('myDirective', function($parse) { 
    return { 
     link: function(scope, element, attrs) { 
      var val = $parse(attrs.my directive)(scope); 
     } 
    }; 
}); 

Answer 2

вы можете использовать изолировать сферу. Если предположить, что массив животных является сфера свойства родительского контроллера, вы можете сделать это:

<div ng-repeat="animal in animals"> 
    <animal this-animal="animal"></animal> 
</div> 

И в коде директивы:

module.directive('myDirective', function() { 
    return { 

     scope: { 
      thisAnimal: "=" 
     }, 

     link: function(scope, element, attrs) { 
      scope.thisAnimal.gestation = 10; 
     } 
    }; 
}); 

См раздел Области изолят этой странице для более подробной информации :

https://docs.angularjs.org/guide/directive