CODEWITHSUNDEEP
javascriptjqueryjsonangularjs
Sen
Sen

Reputation: 126

Displaying json data via angular

I have created a datatable showing a list of persons and their details. When the datatable is clicked, it has to show the entity of the single person with their details but my problem is, when I click the datatable it is opening a chat box showing the entity of the last clicked person changing all other chat box details.

1.How can I limit the append directive, that is, one chatbox for one id?

2.How to display the name of the particular person without changing the older chat box entity?

Here is the link to Plunker http://plnkr.co/edit/VTWcZQjlAda0KQ9sjFzI?p=preview

Upvotes: 1

Views: 95

Answers (3)

Okazari
Okazari

Reputation: 4597

Actually i really think there is no need for a directive here.

It can simply be done by using ng-repeat and a collection.

See it working in this plunker

I added this in the controller :

  $scope.bottomListCollection = [];
  $scope.addToBottomList = function(artist) {
    $scope.bottomListCollection.push(artist);
  }

And this kind of ng-click on your rows :

ng-click="addToBottomList(item)"

Some advices to do things cleaner in angular : Never use :

  1. $compile.
  2. $element.
  3. $broadcast.
  4. Jquery.

Take care of custom directives, theses are 90% miss-used.

Just a reminder : Directives are intended to add a behavior on an element. Not adding html.

Hope it helped.

Upvotes: 1

tasty_snack
tasty_snack

Reputation: 174

To answer the second part of your question : Create an isolate scope!

That can be done by passing true while creating a new scope: childScope = $scope.$new(true).

Once the isolate scope is created, you can do: childScope.userInfo = $scope.userInfo;

PLUNK : http://plnkr.co/edit/IxPh4EmLpr8WAqRWtRlo?p=preview

Also, a hackish solution using one time databinding (not recommended): http://plnkr.co/edit/RjZNOSyaemqg2eZ4Gma1?p=preview

To answer the first part: You could keep track of the id's that are passed to the $scope.AppendText function perhaps?

PLUNK: http://plnkr.co/edit/BCNju0rToyVYvNjqzVON?p=preview

Hope this helps! IMHO it would be much more simpler if you could just ng-repeat over your json data to generate the chatboxes.

Upvotes: 0

Vanojx1
Vanojx1

Reputation: 5584

Some tips that fix your issue

childScope = $scope.$new(true);

to ve an isolated scope you ve to use the first parameter of $new method for more info look at the docs ($new(isolate, parent); --> https://docs.angularjs.org/api/ng/type/$rootScope.Scope)

then you need to add a control on the AppendText function like this to check if the same chat already exist

$scope.AppendText = function(idx) {
  $scope.userInfo = $scope.artists[idx];
  var chat = $('#chat_'+$scope.userInfo.shortname);
  console.log(chat);
  if ($scope.stage === 'Add' && chat.length==0 ) {
    childScope = $scope.$new(true);
    childScope.userInfo = $scope.userInfo; //<--- add old scope info to new scope
    var compiledDirective = $compile('<div my-directive></div>');
    var directiveElement = compiledDirective(childScope);
    $('.my-directive-placeholder').append(directiveElement);
  } else {
    $scope.stage = 'Add';
  }
}

working plunker http://plnkr.co/edit/TFjlN0U2i4irKtG2D5yu?p=preview

Upvotes: 1

Related Questions