Директивы AngularJS и модель

Question

Я не уверен, что этот вопрос был задан, но это хорошая практика (не в порядке), чтобы испортить модель данных из директивы AngularJS?

Например, если в мой контроллер у меня есть какой-то объект, как:

app.controller("MyCtrl", function() { 
     $scope.obj.setOfKnives = ["Ginsu", "Steak"]; 
}); 

И у меня были некоторые кнопки с директивой о нем, как (написано для краткости):

<button add-knife>Add a Knife</button/> 

В что директива добавить нож, это хорошая практика (опять же, не в порядке, к делу), чтобы возиться с этим массивом setOfKnives, что-то вроде:

app.directive("addKnife", function() { 

     return { 
      "restrict": "A", 
      "link": function (scope, element, attr) { 
       scope.addAKnife = function (theKnife) { 
        scope.obj.setOfKnives.push(theKnife); 
       }; 

       element.on("click", function() { 
        scope.addAKnife("Serrated"); 
       }); 
      } 
     }; 
}); 

(Я считаю, что было бы лучше сделать эту директиву директивой элемента с шаблоном ...)
Так ли это хорошая практика? Или мне следует использовать директиву для добавления объектов DOM на страницу и чтобы какая-то функция контроллера заботилась о добавлении и удалении элементов из массива setOfKnives на основе DOM?

Answer 1

Манипулирование моделью внутри директивы - путь. Следует избегать прямого манипулирования DOM.

Чтобы сделать директиву более модульной, вы можете передать массив как атрибут в директиве и создать изолированную область действия, которая ограничивает то, что получает общий доступ между контроллером.

<button add-knife knives="setOfKnives" >Add a Knife</button/> 

В директиве

app.directive("addKnife", function() { 

     return { 
      "restrict": "A", 
      scope:{ knives:'='}, 
      "link": function (scope, element, attr) { 
       scope.addAKnife = function (theKnife) { 
        scope.knives.push(theKnife); 
       }; 

      } 
     }; 
}); 

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

Answer 2

В любом случае, у вас будет доступ к внутреннему состоянию DOM, и вы можете изменить модель внутри директивы, но директивы - это настраиваемые элементы управления, которые предназначены для использования на разных страницах, поэтому в идеале они должны вести себя как другие элементы управления и пользовательские логика должна быть делегирована Сервисам/контроллерам, чтобы директива могла быть повторно использована без изменений.