angularjs - 使用 ng-bind 在使用嵌入的指令上定义嵌入的内容

Question

考虑some-directive以下定义对象：

{
   restrict: "E",
   transclude: true,
   template: "<div>content: <div ng-transclude></div></div>"
}

我可以这样使用它：

<some-directive>{{someContent}}</some-directive>

毫不奇怪，someContent将被放置在它必须的地方。

但我也希望能够以这种方式使用它：

<some-directive ng-bind='someContent'></some-directive>

这是一个问题的例子

Answer 1

我不清楚为什么必须使用ng-bindover {{ }}，但如果必须使用，那么解决此问题的一种方法是使用transclude: "element".

但是，这会忽略该template属性，因此您需要在compile函数中手动添加它。而且，您需要使指令的优先级高于ngBind（具有默认优先级1）：

return{
  restrict: "E",
  transclude: "element",
  priority: 10,
  compile: function(tElem, tAttrs){
    var template = "\
      <div class='some-directive'>\
        <div class='some-directive-header'>My custom component</div>\
        <div class='some-directive-body' ng-transclude></div>\
      </div>";

    tElem.replaceWith(template);
  }
};

你的叉叉

Answer 2

这修复了您的示例：

<some-directive ><span ng-bind='someContent' /></some-directive>

http://plnkr.co/edit/qwKFYv1WAbpPTR1gGuqA?p=preview