Question

我有一个关于一起使用ng-include和ng-controller的问题。在同一个元素中，ng-include和ng-controller属于同一个元素，我把url做了修改。

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

Html Part：

<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 Part：

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";
}

但是我从template1和template2切换，template2没有正确显示{{girl}}值，有人知道为什么吗？

由于 Eric Xin

Answer 1

您可以尝试使用ng-switch和指令，例如This Plunker Example

但是，需要将动画更改为适用于ng-switch

我更喜欢ng-include

的指令

ng-include指令和带变量的ng-controller选项

1 个答案: