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

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

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>

Answer 2

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

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

然后你可以按照你想要的方式传递对象。

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

希望这会有所帮助。

Answer 3

在课堂上宣布

public myObj: any;

在构造函数集中

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

在模板中

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