Question

在我的指令中，我使用的是2个模板。根据{{1}}切换模板。

问题是找到index之后我们调用方法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>

任何人都帮我解决这个问题？ Live Demo

这是我的js：

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

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)因为它是冗余的，元素已经包含了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>

如何在指令

1 个答案: