CODEWITHSUNDEEP
javascripthtmlangularjsangularjs-directive
kliukovking
kliukovking

Reputation: 590

how to get param in my directive

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>

Upvotes: 0

Views: 40

Answers (3)

Muhammed Anees
Muhammed Anees

Reputation: 1850

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.

Upvotes: 1

Slava Utesinov
Slava Utesinov

Reputation: 13488

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>

Upvotes: 1

Deepak Kumar T P
Deepak Kumar T P

Reputation: 1076

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>

Upvotes: -1

Related Questions