3

我见过很多与此非常相似的问题,但我是 Angular 的新手,所以它们不太有意义。这是我的情况:

我定义了一个指令:

robus.directive("titlebar", function() {
  return {
    restrict: "E",
    scope: { title: '@title' },
    template: "<header class='bar-title'><h1 class='title'>{{title}}</h1></header>",
    replace: true
  }
});

我像这样使用这个指令:

<titlebar title="{{workout.name}}"></titlebar>

理想情况下,我想在其中添加可选属性,例如:

<titlebar title="{{workout.name}}" editButton="true" closeButton="true"></titlebar>

我如何在template定义中处理这些?我一直在阅读有关$compile()我需要覆盖的功能,但不清楚如何这样做。模板只是简单的字符串,所以我觉得我可以将它们内联而不是将它们作为单独的文件引用。

谢谢!

4

1 回答 1

3

通过将它们添加到范围声明中,使它们在指令中可访问,就像您拥有标题一样。然后将按钮添加到模板中,并像这样对它们进行条件化:

robus.directive("titlebar", function() {
  return {
    restrict: "E",
      scope: { title: '@title', edit: '@editButton', cancel: '@cancelButton' },
      template: "<header class='bar-title'><h1 class='title'>{{title}}</h1><span ng-show='edit'>Edit</span><span ng-show='cancel'>Cancel</span></header>",
    replace: true
  }
});

<titlebar title="{{workout.name}}" edit-button="true" cancel-button="false"></titlebar>

请注意,它是指令中的 editButton 和 HTML 中的 edit-button;有一个从连字符到驼峰式的内置转换,如果你不知道它会咬你。

另外,我建议在这里使用 transclude,因为我认为它会读起来更清晰:

robus.directive("titlebar", function() {
  return {
    restrict: "E",
      scope: { edit: '@editButton', cancel: '@cancelButton' },
      template: "<header class='bar-title'><h1 class='title' ng-transclude></h1><span ng-show='edit'>Edit</span><span ng-show='cancel'>Cancel</span></header>",
    transclude: true,
      replace: true
  }
});

<titlebar edit-button="true" cancel-button="false">{{workout.name}}</titlebar>
于 2013-06-25T00:42:52.617 回答