如何通過'索引'值的條件在角度指令中切換模板

Question

我需要根據從ng-repeat得到的index的計數來​​更改template如何實現？

在我的情況

如果index是0，我想改變'模板」 這裏是我的代碼：

"use strict"; 
angular.module("tcpApp") 

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

我想這樣，但會拋出錯誤：

template : scope.index ? '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' : '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>', 

錯誤： ReferenceError: scope is not defined

HTML

<div class="progName"> 
       <div class="swiper"></div> 

       <program-name name="{{appName.title}}" data-page="Home" index="{{$index}}" ng-repeat="appName in appNames"></program-name> 
      </div> 

Answer 1

我沒有測試，但你應該能夠做這樣的事情之一：

.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); 
         } 
     } 
    }) 

編輯

甚至更​​好的解決辦法是：

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

       template : function(tElement, tAttrs) { 
         return Number(tAttrs.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')); 
           } 
          } 
      } 
     }) 

Answer 2

你必須在代碼中注入示波器，以便在條件下使用它

template : function (scope){return scope.index ? '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}</h2>' : 
            '<h2 class="que t{{index}}" ng-click=callMe()>{{name}}arif</h2>'}, 

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