8

In my app, main template has a drop-down list of months (Jan, Feb ...).

The main template contains an ng-view, loaded with partial templates using routeProvider.

How do I refresh the ng-view (by re-running its controller) from main template's controller?

So that partial template content will refresh when user switches to a different month.

Main template HTML:

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

Route provider:

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

Main controller:

function Main($scope, $cookies) {
    ...switch month and ajax...
    // Reload ng-view goes here
}
Improve this question
2
  • 2
    Please share your javascript and html code. Commented Sep 9, 2013 at 3:05
  • 1
    fiddle added to my answer jsfiddle.net/hzxNa/106 Commented Sep 9, 2013 at 4:12

3 Answers 3

Reset to default
5

AngularJS broadcast function works here...

Main template controller:

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

};

Each partial template controller:

var refresh = function() {
  .... template initialization
};
refresh(); // initialize at once
$scope.$on("REFRESH", refresh); // re-initialize on signal
Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

how does this relate to your original question?
it "refresh the ng-view (by re-running its controller) from main template's controller".
you shouldnt need to rerun the controller based on a user selection, are you sure that you should be going in that direction?
My use case is little bit special, here's more details: upon switching to another month, API server state changes and will serve content relevant to the chosen month, therefore all partial templates need to re-initialize.
That is an un-angular way to do things. the data should be loaded in via $http or $resource and mapped to your model/controller and the partial which is bound to your model/controller will automatically refresh without you having to re run the controller.
|
2

You should not worry about reloading the template. Since the template is loaded, the 2-way data binding in the partial template should just work whenever you change the data in the Main controller since the template is in the controller's scope.

You can use $location.url('/module/:module') to reload the view whenever you want, hence the controller will be re-evaluated.

Improve this answer

2 Comments

I appreciate that, but in my use case, switching month will cause server state change, and partial template should re-initialize itself (by making API calls to server).
@HowardGuo Ok. Then you can try to put this in the callback function where the server state is successfully made. $location.url('/module/:module'), plugging in the correct module parameter
1

fiddle included http://jsfiddle.net/hzxNa/106/

The fiddle has the templates in the same 'html', but you can put them into separate files as well

  <!-- 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>

you can use ng-include and bind it to the template you need

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

where template is a variable in your controller that points to a html file which is your template

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.