how to get param in my directive

Question

I write template for my directive, template.html:

<ul><span>{{name}}</span>
   <li ng-repeat="value in values">
</ul>

Plug directive like:

app.directive('myDir', function(){
   return{
    restrict: 'A',
    templateUrl: 'template.html'
   };
});

I have some js object looks like:

const myObj:{
    name:"MyObjName",
    values:["val1","val2","val3","val4"]
}

Tell me please how can I send to my template my object so it will render directive like I want?? In index html it looks like <div my-dir="{{myObj}}"></div>

Answer 1

You can pass the object to directives scope and it'll be available in your template. Just use

 app.directive('myDir', function(){
   return{
    restrict: 'A',
    scope: {
       'myDir': '='
    },
    templateUrl: 'template.html'
   };
});

and then you can pass the object the way you want to the directive.

<div my-dir="myObj"></div>

Hope this will help.

Answer 2

app.directive('myDir', function(){
   return{
    scope: {
      myDir: "="
    },
    restrict: 'A',
    templateUrl: 'template.html'
   };
});

<ul><span>{{myDir.name}}</span>
   <li ng-repeat="value in myDir.values"></li>
</ul>

Usage:

<div my-dir="myObj"></div>

Answer 3

in class declare

public myObj: any;

In constructor set

this.myObj={
    name:"MyObjName",
    values:["val1","val2","val3","val4"]
};

In template

<div [my-dir]="myObj"></div>