ng-include指令和ng-controller選項變量

Question

我有一個關於一起使用ng-include和ng-controller的問題。在同一個元素中，ng-include和ng-controller位於同一個元素上，我使用url進行修改。

http://jsfiddle.net/api/post/library/pure/

HTML部分：

<div ng-app="App"> 
    <div ng-controller="Ctrl"> 
    <select ng-model="template" ng-options="t.name for t in templates"> 
    <option value="">(blank)</option> 
    </select> 
    url of the template: <tt>{{template.url}}</tt> 
    <hr/> 
    <div class="slide-animate-container"> 
     <div class="slide-animate" ng-include="template.url" ng-controller="template.ct"></div> 
    </div> 
    </div> 


    <!-- template1.html --> 
    <script type="text/ng-template" id="template1.html"> 
    Content of template1.html {{boy}} 
    </script> 

    <!-- template2.html --> 
    <script type="text/ng-template" id="template2.html"> 
    Content of template2.html {{girl}} 
    </script> 
</div> 

JavaScript部分：

angular.module('App', ['ngAnimate']); 

function Ctrl($scope) { 
    $scope.templates = 
     [ { name: 'template1.html', url: 'template1.html', ct: c1} 
     ,{ name: 'template2.html', url: 'template2.html', ct: c2} ]; 
    $scope.template = $scope.templates[0]; 
} 

function c1($scope){ 
    $scope.boy = "batman"; 
} 


function c2($scope){ 
    $scope.girl = "catgirl"; 
} 

但我從模板1和模板2切換時，模板2不顯示我{{女孩}}值正常，有人知道爲什麼？

感謝 埃裏克鑫

Answer 1

你可以嘗試使用NG-開關和指令像This Plunker Example

但是動畫需要改變爲NG-開關工作

我寧願指令來ng-include