如何在我的指令中获取参数

Question

我为我的指令编写模板，template.html:

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

插件指令如：

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

我有一些 js 对象看起来像：

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

请告诉我如何将我的对象发送到我的模板，以便它按照我想要的方式呈现指令？？在索引 html 中它看起来像 <div my-dir="{{myObj}}"></div>

Answer 1

在class声明

public myObj: any;

在构造函数中设置

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

在模板中

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

Answer 2

您可以将对象传递给指令范围，它将在您的模板中可用。只需使用

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

然后您可以按照您希望的方式将对象传递给指令。

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

希望这会有所帮助。

Answer 3

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>

用法：

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

如何在我的指令中获取参数

how to get param in my directive

html

javascript

angularjs

angularjs-directive