AngularJs Directives multiple times issue

Question

I want to use my directive multiple times. Each time I click my button I want the template to be updated accordingly. Intially $scope.item contains item.id = 1. Hence it displays as

Next when I click on the button I change the item.id to 4. Now the result is as follows.

But as you see, the initial item1 displayed has been changed to item4.

I want to first display item1 and on click of button I want to display item4 without changing the initial value displayed. How can I achieve this?

I have the following directive

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

My controller

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

My html

<div ng-controller="MyCtrl">
<button ng-click="hello()">
Click here
</button>
    <div id='container'>
     <my-directive item='item'></my-directive>
     </div>
</div>

Hi, please add to the question the AngularJS version that you're using, 1.5 or lower ? Can you add a case sample in plnkr.co ? I think this could be achieve better with a service/factory for all the logic, but i'm not sure of one point: Do you want that each time you click on the button, a item is added to the list ? first click = item1 second click = item1, item4 third click = item1, item4, itemX ( or there gonna be only TWO clicks ) — Héctor León
– Héctor León, Commented Jun 1, 2016 at 10:42
I am using AngularJs 1.5. Each time the button is clicked, I want a new item to be added. The value of $scope.item changes on each click and the updated value needs to be shown without changing the previous value. — ASR
– ASR, Commented Jun 1, 2016 at 10:47

Strille · Accepted Answer · 2016-06-01 10:48:53Z

1

You should try to avoid doing DOM manipulation in controllers - that's not the "Angular way".

In this case, I would use ng-repeat on <my-directive>:

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

Then on each click just add an item to the list of items:

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

  var idCount = 0;

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

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

  addItem();
}

Working jsfiddle: https://jsfiddle.net/ub3zmo9s/1/

answered Jun 1, 2016 at 10:48

Strille

5,7913 gold badges28 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ASR Over a year ago

No, I want to do dom manipulation in my controller since the $scope.item is updated each time the route is called. I want the previous value displayed to be retained and the new value to be appended dynamically to the dom

ASR Over a year ago

The first call returns item1, which is displayed to the user. Second time I make a call the value returned might be item2 which has to be appended to the dom.

Collectives™ on Stack Overflow

AngularJs Directives multiple times issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related