如何自定义指令模板的一部分？

Question

假设我有一个简单的指令：

<div id="testdirective">
   <span>Test Directive</span>
- Custom HTML Here -
</div>

如何制作指令，以便当用户点击index.html中的按钮时，它会调用Controller中显示指令的方法，但只会更改：

  

  
• 自定义HTML -
  

基于点击的按钮？

的index.html

Assume the following is part of a Controller

<button>1</button>
<button>2</button>

行为是，当点击“button1”时，将加载按钮“1”的内容，如果点击按钮“2”，将加载“2”的特定html。

我想保持“检查按钮1是否被点击逻辑”在指令本身内而不是控制器（如果可能）。

Answer 1

您可以绑定到范围内的变量，而不是替换实际的文本。这个变量是你的模型。 e.g。

<div id="testDirective">
    <span>Test Directive</span>
    {{myText}}
</div>

这将使用myText范围属性绑定DOM的该部分中的文本。您的控制器将能够设置初始值（如果您正在编写指令，则更可能设置链接功能）。

$scope.myText = '- Custom HTML Here -'; // Some initial text

按钮可以使用ng-click来实现模型中的更改

<button ng-click="myText='button 1 content'">1</button>
<button ng-click="myText='button 2 content'">2</button>

我不会在这里为您编写完整的指令，但您可以使用示例here来了解如何执行此操作。如果您只需要在单击按钮时显示此指令，您也可以查看ng-show。