Директивы AngularJs выпускаются несколько раз

0

Я хочу использовать свою директиву несколько раз. Каждый раз, когда я нажимаю кнопку, я хочу, чтобы шаблон был соответствующим образом обновлен. Внутри $ scope.item содержится item.id = 1. Следовательно, он отображается как

Изображение 174551

Затем, когда я нажимаю на кнопку, я меняю item.id на 4. Теперь результат выглядит следующим образом.

Изображение 174551

Но, как вы видите, исходный элемент1 был изменен на item4.

Я хочу сначала отобразить элемент1, а при нажатии кнопки я хочу отобразить элемент4, не изменяя отображаемое начальное значение. Как я могу это достичь?

У меня есть следующая директива

var app = angular.module('myApp', []);
app.directive('myDirective', function () {
    return {
        restrict: 'AE',
        scope:true,
        template: '<div>{{ item.id }}</div>'
    }
});

Мой контроллер

function MyCtrl($scope,$compile) {
  $scope.item = {id: 'item1'};    
  $scope.hello = function() {
      $scope.item = {id: 'item4'};   
      var dialogTextHTML ="<my-directive item ='item'></my-directive>"  
      var compiledDialogData = $compile(dialogTextHTML)($scope);
      document.getElementById('mycontainer').appendChild(compiledDialogData[0]); 
  }
}

Мой html

<div ng-controller="MyCtrl">
<button ng-click="hello()">
Click here
</button>
    <div id='container'>
     <my-directive item='item'></my-directive>
     </div>
</div>
  • 0
    Изолированные области? thinkster.io/egghead/isolate-scope-at
  • 0
    Привет, пожалуйста, добавьте к вопросу версию AngularJS, которую вы используете, 1.5 или ниже? Можете ли вы добавить пример кейса в plnkr.co ? Я думаю, что это может быть достигнуто лучше с помощью сервиса / фабрики для всей логики, но я не уверен в одном: хотите ли вы, чтобы каждый раз, когда вы нажимаете на кнопку, элемент добавлялся в список? первый клик = item1 второй клик = item1, item4 третий клик = item1, item4, itemX (или будет только ДВА щелчка)
Показать ещё 1 комментарий
Теги:

1 ответ

1

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

В этом случае я бы использовал ng-repeat в <my-directive>:

<my-directive ng-repeat="item in items" item='item'></my-directive>

Затем на каждом клике просто добавьте элемент в список элементов:

function MyCtrl($scope, $compile) {
  $scope.items = [];

  var idCount = 0;

  function addItem() {
    idCount += 1;
    $scope.items.push({
      id: 'item' + idCount
    });
  }

  $scope.hello = function() {
    addItem();
  }

  addItem();
}

Рабочий jsfiddle: https://jsfiddle.net/ub3zmo9s/1/

Поделиться
  • 0
    Нет, я хочу сделать dom-манипуляции в моем контроллере, так как $ scope.item обновляется каждый раз, когда вызывается маршрут. Я хочу, чтобы предыдущее отображаемое значение сохранялось, а новое значение динамически добавлялось в DOM.
  • 0
    Первый вызов возвращает item1, который отображается пользователю. Во второй раз, когда я звоню, возвращаемое значение может быть item2, которое должно быть добавлено в dom.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню