如何在Angular指令中使用不帶模板的transclude？

Question

<button command="saveCmd">{{saveText}}</button>

Command指令沒有任何模板 - 它是行為指令。 但我需要使用{{saveText}} transclude: true來顯示{{saveText}} 。

我可以像模板一樣創建虛擬模板template: "<div ng-transclude></div>"但我不確定按鈕內的div是否對所有瀏覽器都是有效的html。

我也可以使用一個屬性來定義標題，例如<button title="saveText"...但我的問題是關於沒有模板的ng- <button title="saveText"... 。 可能嗎？

提前致謝。

更新：

一個新的“隔離”范圍scope: {} inside指令是默認情況下{{saveText}}未持久化的原因。

Answer 1

您可以在沒有控制器且沒有隔離范圍的情況下制定指令。 在鏈接功能中，我有時會做這樣的事情：

.directive('toggle', function ($parse) {
  return {
    /* We can't use an isolated scope in this directive, because it happens 
     * all the time that you need to put a toggle on an element that uses the scope:
     * <span toggle="boolVar" ng-class="{active: boolVar}">{{someVar}}</span>
     *
     * Transclusion can be an option to make the {{someVar}} work, 
     * but the ng-class will use the isolated scope for this directive
     * (if we'd use the isolated scope, which we don't)
     */
    link: function (scope, $element, attrs) {
      // use a $parse getter/setter, because toggle can contain a
      // complicated expression
      var getter = $parse(attrs.toggle);
      var setter = getter.assign;

      $element.on('click', function () {
        scope.$apply(function () {
          setter(scope, !getter(scope));
        });
      });
    }
  };
});

也許這個$ parse技巧有助於你的命令設置......