Take selected object on-click, update into DIV

Question

I am currently working with Angular. My situation is below.

• I have a set of objects, "contacts".
• Inputting custom text into a search box, a table is then "ng-repeated" for each 'contact in main.info'.
• When I click one one of the row entries, this entry is stored to a new object, 'selected'. (with all of that contacts information).

I then want to take that selected entry (which is stored as the 'selected' object) and output that into a different HTML section titled "Contact Information". This section of HTML is stored in a directive Template.

How can I dynamically update the template directive that I have, to include the newly populated 'selected' object?

I cannot seem to figure out the correct syntax to transfer the data in that object into the different section.

Pls, hlp.

Answer 1

Try to use an attribute in the directive:

<my-directive selected-item="{{selectedItem}}"></my-directive>

And then in the link function in the directive just use the attr.selecteditem :

link: function (scope, iElement, iAttrs) {
   scope.selectedItem = iAttrs.selecteditem;
}

Or if you have an isolate scope:

scope: {
   selecteditem: '='
},
link: function (scope, iElement, iAttrs) {
   console.log(selecteditem);
}