javascript - AngularJS - 创建条件按钮级联所有属性的指令

Question

我想创建一个 AngularJS 指令，它能够根据 trigger-event 属性(绑定(bind)并具有动态值)使用 ng-if 创建自定义按钮根据用户在表单上的操作)并在新按钮上级联所有其他属性(任何，不可预测)。该按钮将包含与 myButton 相同的 HTML。

Controller 中指定触发事件条件:

$scope.trigger = (specified in the controller and dynamic); // can be true or false
$scope.disabled = (specified in the controller and dynamic); // can be true or false

myButton 将是这样的:

<my-button trigger-event="trigger" class="class" ng-disabled="disabled" ng-click="callback" any-other-attribute=[...]>
  <span>any html</span>
  <any-other-html></any-other-html>
</my-button>

该指令将反射(reflect)在如下内容中:

<button ng-if="trigger-event" directive-to-trigger-event class="class" ng-disabled="disabled" any-other-attribute=[...]>
  <span>any html</span>
  <any-other-html></any-other-html>
</button>
<button ng-if="!trigger-event" type="submit" class="class" ng-disabled="disabled" ng-click="callback" any-other-attribute=[...]>
  <span>any html</span>
  <any-other-html></any-other-html>
</button> 

directive-to-trigger-event 可以是任何东西:启动弹出窗口的东西，重置表单的东西，任何东西。

有人知道如何做到这一点吗？任何提示将不胜感激。

这是想法:http://plnkr.co/edit/kHCoExQSTPssL294NUux?p=preview

谢谢!

Answer 1

可以创建触发任何事件的指令。在任何事件触发器上，必须有特定的功能以独特的方式执行。

因此创建一个 Base scoped Controller 并在该 Controller 的范围内注册所需的触发事件函数。还传递一个属性，该属性包含与函数声明具有相同顺序的函数参数。

按照您提到的创建指令，将在下面的链接中使用:

<my-button trigger-event="triggerFunctionName" class="class" other-attribute=[...]
         trigger-html-content="triggerHTMLPartialName">
     <span>any html</span>
     <any-other-html></any-other-html>
</my-button>

创建共享基础 Controller 作用域的指令并编译传递的模板 URL 的 HTML，并使用嵌入模式更新指令并传递传递的触发函数。