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

【问题标题】：how to get param in my directive如何在我的指令中获取参数
【发布时间】：2017-12-26 18:02:39
【问题描述】：

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

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

Plug 指令如：

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

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

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

请告诉我，我怎样才能将我的对象发送到我的模板，以便它像我想要的那样呈现指令？在 index html 中，它看起来像 <div my-dir="{{myObj}}"></div>

【问题讨论】：

标签： javascript html angularjs angularjs-directive

【解决方案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>

【讨论】：

【解决方案2】：

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

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

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

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

希望这会有所帮助。

【讨论】：

无法理解为什么它不起作用。指令工作正常，在 DOM 中我看到了我的模板，但没有来自 myObj 的任何数据。
我已经更新了答案。由于您传递的是 $scope 模型而不是字符串，因此应将 '@' 替换为 '=' 并直接传递对象。工作 Plunkr plnkr.co/edit/BPt0NU?p=preview。抱歉。我只是第一次没有注意到。
在我使用 '@' 和 my-dir="{{myObj}}" 之前编写的 plnkr 中。但这不起作用。我已经使用字符串和 '=' 修复了代码，但如果您能解释一下为什么我在 plnkr 中的示例不起作用，我将不胜感激。
如果你传递一个像{{myDir}}, interpolation 这样的对象，它会作为一个字符串绑定到指令的作用域，并且在你的模板中它可以作为一个字符串使用。在您的 plunkr 中，myDir 实际上在指令的模板中作为字符串而不是对象可用，因此 ng-repeat 不起作用。并且 '@' 更改为 '=' 因为 '@' 用于字符串绑定，而 '=' 用于双向模型绑定。
明白了！）谢谢你的解释！！

【解决方案3】：

在类中声明

public myObj: any;

在构造函数集合中

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

在模板中

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

【讨论】：

你确定这将在 angularJS 中工作吗？ public myObj: any - 据我了解它的打字稿，不是吗？