角度指令 - 将内容替换为属性

Question

TL;DR;
我想将替换标签 innerHtml 的指令写入其他标签属性，并使其编译。 表达式在ng-repeat 中（显然这很重要）。
<ii>{{exp}}</ii> -> <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>"
    };
});

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

任何帮助将不胜感激。

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

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'];
});

.red {
  color: red
}

<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>

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: '=" }