将参数传递给Angularjs中的指令

I have the following directive:

我有以下指令：

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

I want to be able to reuse it and to do this I want to be able to pass parameter as a title.

我希望能够重用它并执行此操作我希望能够将参数作为标题传递。

In the template I have this fragment:

在模板中我有这个片段：

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

then in index.html:

然后在index.html中：

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

But when I open this page I just see {{title}}.

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

What is the correct way to pass "title"?

传递“头衔”的正确方法是什么？

Thanks!

谢谢！

1 个解决方案

#1

Note that title is a HTML attribute so avoid using this name for a directive input, unless you use the data-title syntax. Also, = scope data is used for 2-way binding which is not the case here (you just need a string) - in this case it's easier to use the @ string value declaration. So:

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

scope:{
  listTitle: "@"
},

And

和

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

And

和

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

This should fix it.

这应该解决它。