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 回答