angular指令 - 将内容替换为属性

Question

TL; DR;
我想编写指令将标记innerHtml替换为其他标记属性，并使其编译。 表达式在ng-repeat中（显然这很重要） <ii>{{exp}}</ii> - ＆gt; <i title="exp compiled!"></i>

长篇故事
我有下一个指令：

<span ng-repeat="name in names">
    <ii ng-class="{red: isRed}">Here comes HTML<br/> with {{name}} bla bla </ii>
</span>

附加到下一个控制器的指令：

EZcountApp.controller('myCtr',function($scope){
    $scope.isRed = true;
    $scope.names= ['Alon','Moshe','Zvi'];
});

我希望将它编译到下一个输出中：

<i class="fa fa-question-circle" ng-class="{red: isRed}" title="
Here comes HTML<br/> with {{name}} bla bla
"></i>

最终的出局应该是：

<span><i class="fa fa-question-circle red" title="Here comes HTML<br/> with Alon bla bla"></i></span>
<span><i class="fa fa-question-circle red" title="Here comes HTML<br/> with Moshe bla bla"></i></span>
<span><i class="fa fa-question-circle red" title="Here comes HTML<br/> with Zvi bla bla"></i></span>

我正在使用下一个指令：

myApp.directive('ii',function(){
return {
        restrict: 'E',
        transclude: 'element',
        replace: true,
        scope: {},
        controller: function ($scope, $element, $attrs, $transclude) {
            // if there is no class of fa-XXXX
            // some login removed from here...
            $element.addClass('fa-question-circle');


        },
        template: "<i class='fa help-icon' data-toggle='tooltip' data-placement='top' ng-transclude></i>"
    };
});

问题是它不起作用，标题中的文字没有编译。

任何帮助都将不胜感激。

这里附有一个错误的演示代码，您可以运行

＆＃13;

＆＃13;

myApp = angular.module('myApp', []);
myApp.directive('ii', function() {
  return {
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: {},
    controller: function($scope, $element, $attrs, $transclude) {
      // if there is no class of fa-XXXX
      // some logic removed from here...
      $element.addClass('fa-question-circle');
      //get data from the element and insert into title
      $scope.title = $element.html();
      //empty the element
      $element.empty();

    },
    template: "<i class='fa help-icon' data-toggle='tooltip' data-placement='top' title='{{title}}' ng-transclude></i>"
  };
});

myApp.controller('myCtr', function($scope) {
  $scope.isRed = true;
  $scope.names = ['Alon', 'Moshe', 'Zvi'];
});

＆＃13;

.red {
  color: red
}

＆＃13;

<div ng-app="myApp">

  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
  <div ng-controller="myCtr">
    actual result:
    <span ng-repeat="name in names">
    <ii ng-class="{red: isRed}" title="{{title}}"></ii><br/>
</span>
    results in console (<b>title attr is empty</b>):
    <pre>
    &lt;i class=&quot;fa help-icon ng-isolate-scope fa-question-circle red&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; ng-transclude=&quot;&quot; ng-class=&quot;{red: isRed}&quot;&gt;&lt;/i&gt;
&lt;i class=&quot;fa help-icon ng-isolate-scope fa-question-circle red&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; ng-transclude=&quot;&quot; ng-class=&quot;{red: isRed}&quot;&gt;&lt;/i&gt;
&lt;i class=&quot;fa help-icon ng-isolate-scope fa-question-circle red&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; ng-transclude=&quot;&quot; ng-class=&quot;{red: isRed}&quot;&gt;&lt;/i&gt;
    </pre>
  </div>
</div>
desired results
<pre>
&lt;i title=&quot;Here comes HTML with Alon bla bla&quot; class="fa help-icon ng-isolate-scope fa-question-circle red" &gt;&lt;/i&gt;
&lt;i title=&quot;Here comes HTML with Moshe bla bla&quot;class="fa help-icon ng-isolate-scope fa-question-circle red" &gt;&lt;/i&gt;
&lt;i title=&quot;Here comes HTML with Zvi bla bla&quot; class="fa help-icon ng-isolate-scope fa-question-circle red" &gt;&lt;/i&gt;
</pre>

＆＃13;

＆＃13;

＆＃13;

Answer 1

replace:true已弃用 ¹

来自文档：

  

replace（[已弃用！]，将在下一个主要版本中删除 - 即v2.0）

     

指定模板应替换的内容。默认为false。

     

  
• true - 模板将替换指令的元素。
  
• false - 模板将替换指令元素的内容。
  

- AngularJS Comprehensive Directive API

来自GitHub：

  

Caitp--它已被弃用，因为replace: true存在已知的非常愚蠢的问题，其中一些问题无法以合理的方式得到解决。如果你小心并避免这些问题，那么对你有更大的帮助，但为了新用户的利益，更容易告诉他们“这会让你头痛，不要这样做。”

- AngularJS Issue #7636

Answer 2

指令ii使用 isolate 范围。要使父范围内的name变量在指令范围内可见，请在隔离范围绑定中声明它。

scope: { name: '=" }