javascript - 如何在指令中使用模板来处理 `replaceWith` 指令元素

Question

在我的指令中，我使用了 2 个模板。根据索引切换模板。

问题是在找到index之后，我们调用一个element.html()方法来替换更新的模板。

但这使得 directive 元素被包裹起来。我不想包装我的模板。如何做到这一点？

这是我得到的结果:

<program-name name="titre1" data-page="Home" index="0" ng-repeat="appName in appNames" class="ng-scope ng-isolate-scope"><h2 class="que t0" ng-click="callMe()">titre1arif</h2></program-name>

这就是我正在寻找的:

<h2 class="que t0" ng-click="callMe()">titre1arif</h2>

有人能帮我得到这个吗？ Live Demo

这是我的js:

// Code goes here
"use strict";
angular.module('tcpApp', [])
.controller('MainCtrl', function($scope) {
  $scope.appNames=[{title:'titre1'},
                   {title:'titre2'},
                   {title:'titre3'}];

})
.directive('programName', function ( $compile ) {
        return {
            restrict    : 'AE',
            replace     : true,
            scope       : {
                            name:'@',
                            index:'@'
                        },

            link        : function (scope, element, attr) {
                            scope.callMe = function () {
                                console.log($(element).prop('class'));
                            }

                            var getTemplate = function( index ) {
                              return Number(index) ? '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>';
                             }

                             element.html(getTemplate(scope.index));

                            $compile(element.contents())(scope);
                        }
        }
    })

Answer 1

在元素编译后，您可以replaceWith或unwrap。

link: function(scope, element, attr) {
        //....

        element.html(getTemplate(scope.index));

        $compile(element.contents())(scope);

        element.replaceWith(element.contents());
        //Or do
        //element.contents().unwrap();
      }

// Code goes here
"use strict";
angular.module('tcpApp', [])
  .controller('MainCtrl', function($scope) {
    $scope.appNames = [{
      title: 'titre1'
    }, {
      title: 'titre2'
    }, {
      title: 'titre3'
    }];

  })
  .directive('programName', function($compile) {
    return {
      restrict: 'AE',
      replace: true,
      scope: {
        name: '@',
        index: '@'
      },

      link: function(scope, element, attr) {
        scope.callMe = function() {
          console.log($(element).prop('class'));
        }

        var getTemplate = function(index) {
          return Number(index) ? '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>';
        }

        element.html(getTemplate(scope.index));

        $compile(element.contents())(scope);
        //element.replaceWith(element.contents());
        //element.contents().unwrap();
      }
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="tcpApp" ng-controller="MainCtrl">
  <program-name name="titre1" data-page="Home" index="{{$index}}" ng-repeat="appName in appNames" class="ng-scope ng-isolate-scope">
    <h2 class="que t0" ng-click="callMe()">titre1arif</h2>
  </program-name>
</div>

另请注意，您不需要执行 $(element) 因为它是多余的，element 已经被 jq(lite/uery) 包装。在您的模板中，您可能打算使用转发器 index="{{$index}}" 中的实时 $index。另请注意，指令 replace 选项仅在您的指令具有使用 template 或 templateUrl 指定的模板时才有效。 replace 选项也已被弃用。

如果将 index 指定为静态字符串(例如:index="0")，您可以只使用 template/templateUrl 的函数参数语法。

   return {
        restrict    : 'AE',
        replace     : true,
        scope       : {
                        name:'@',
                        index:'@'
                    },
        template: function(elm, attr){
           return Number(attr.index) ? 
               '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' 
                : '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>';
        }

// Code goes here
"use strict";
angular.module('tcpApp', [])
  .controller('MainCtrl', function($scope) {
    $scope.appNames = [{
      title: 'titre1'
    }, {
      title: 'titre2'
    }, {
      title: 'titre3'
    }];

  })
  .directive('programName', function($compile) {
    return {
      restrict: 'EA',
      replace: true,
      scope: {
        name: '@',
        index: '@'
      },
      template: function(elm, attr){
           return Number(attr.index) ? 
               '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' 
                : '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>';
        },
      link: function(scope, element, attr) {
        scope.callMe = function() {
          console.log(element.prop('class'));
        }
      }
    }
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="tcpApp" ng-controller="MainCtrl">
  <div data-page="Home"  ng-repeat="appName in appNames" class="ng-scope ng-isolate-scope">
    <program-name index="0" ng-if="$first"  name="titre1"></program-name>
    <program-name index="1" ng-if="!$first" name="titre1"></program-name>
  </div>
</div>