Question

在我的应用中，主模板有一个月份下拉列表（1月，2月......）。

主模板包含ng-view，使用routeProvider加载部分模板。

如何从主模板的控制器刷新ng-view（通过重新运行其控制器）？

当用户切换到其他月份时，部分模板内容将刷新。

主模板HTML：

....
<body class="" ng-controller="Main">
    <div ng-view></div>
</body>

路线提供者：

....
.config([ '$routeProvider', function($route) {
  $route.when('/module/:module', {
    templateUrl : 'partial/module.html',
    controller : Module
  }).otherwise({
    templateUrl : 'partial/dashboard.html',
    controller : Dashboard
  });
} ]);

主控制器：

function Main($scope, $cookies) {
    ...switch month and ajax...
    // Reload ng-view goes here
}

Answer 1

AngularJS广播功能在这里工作......

主模板控制器：

$scope.switch_month = function(new_month) {
  $.ajax({
    ....
    success : function() {
      $scope.$broadcast("REFRESH");
    },
    ....
  });

};

每个部分模板控制器：

var refresh = function() {
  .... template initialization
};
refresh(); // initialize at once
$scope.$on("REFRESH", refresh); // re-initialize on signal

Answer 2

您不必担心重新加载模板。由于模板已加载，因此只要您更改Main控制器中的数据，部分模板中的双向数据绑定就可以正常工作，因为模板位于控制器的范围内。

您可以随时使用$location.url('/module/:module')重新加载视图，因此将重新评估控制器。

Answer 3

包括小提琴 http://jsfiddle.net/hzxNa/106/

小提琴的模板位于同一个“html”中，但您也可以将它们放入单独的文件中

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

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


  <div ng-controller="Ctrl">
    <select ng-model="template" ng-options="t.name for t in templates">
    </select>
    url of the template: <tt>{{template.url}}</tt>
    <hr/>
    <div ng-include src="template.url"></div>
  </div>

您可以使用ng-include并将其绑定到您需要的模板

<div ng-include src="template" ></div>

其中template是控制器中的一个变量，指向作为模板的html文件

如何重新加载AngularJS部分模板？

3 个答案: