使用ng-click更改指令模板

Question

我在控制器中有幾個按鈕ng-click，我想在單擊按鈕時更改指令模板。達到此目的的最佳方法是什麼？ （I稍後將在元件的作用用的滑動）

Answer 1

指令：

myModule.directive('foo', function() { 
    return { 
     scope: { 
      templateType: '@' 
     }, 
     template: '<div ng-if="templateType == \'a\'">' + 
      ' this is template A ' + 
      '</div>' + 
      '<div ng-if="templateType == \'b\'">' + 
      ' this is template B ' + 
      '</div>' 
    }; 
}); 

模板：

<foo template-type="{{ templateType }}"></foo> 
<a ng-click="templateType = 'b'" href="">Set template to b</a> 

控制器：

$scope.templateType = 'a'; 

Answer 2

可以擴展所提供的示例通過@JB Nizet並使用ng-include來交換模板，並且管理更大尺寸的模板變得更容易。

myModule.directive('foo', function() { 
    return { 
     scope: { 
      templateType: '@' 
     }, 
     template: '<div ng-include="\'/templateRoot/\' + templateType">'+ 
        '</div>' 
    }; 
}); 

現在，您可以創建單獨的模板文件，並讓他們在特定的URL可以（在這種情況下/templateroot/a或/templateroot/b）