将参数传递给 Angularjs 中的指令

Question

我有以下指令：

angular.module('SuperCtrl').directive('listDirective',function(){
  return {
    restrict:'E',
    scope: {
      title:"="
    },
    templateUrl: '../templates/listWidget.html'
  };
});

我希望能够重用它，为此我希望能够将参数作为标题传递。

在模板中我有这个片段：

<h3 class="voice voice-brand pull-left" style="font-weight:bold">{{title}}</h3>

然后在 index.html:

<list-directive title="test1" ng-show="eventsActive"></list-directive>

但是当我打开这个页面时，我只看到 {{title}}。

正确的传递方式是什么"title"?

谢谢！

Answer 1

请注意 title 是一个 HTML 属性，因此请避免将此名称用于指令输入，除非您使用 data-title 语法。此外，= 范围数据用于双向绑定，此处不是这种情况（您只需要一个字符串）- 在这种情况下，使用 @ 字符串值声明更容易。所以：

scope:{
  listTitle: "@"
},

和

<list-directive list-title="test1"  ng-show="eventsActive"></list-directive>

和

<h3 class="voice voice-brand pull-left" style="font-weight:bold">{{listTitle}}</h3>

这应该可以解决问题。

将参数传递给 Angularjs 中的指令

passing parameter to directive in Angularjs

directive

angularjs

angularjs-directive

angularjs-scope