angularjs - Endless loop using ng-include -


i have following "master-template":

<html ng-app="myapp"><head/> <body ng-controller="homecontroller"> <div class="container" id="maincontent" ng-include="'dashboard/'+menu()+'.html?v='+getrandom()"></div> </body> 

inside home-controller include content according "menu"-parameter:

myapp.controller('homecontroller',function($scope,$location) {      $scope.menu=function() {         var submenu=$location.search().menu;         if (submenu===undefined) {             submenu="home"         }         return submenu;     },     $scope.getrandom=function() {         return math.floor((math.random()*6)+1);     },     $scope.$on('$includecontentloaded', function(event) {         $(".bsswitch").bootstrapswitch();     }); }); 

(the random-part used stop caching in dev-environment)

the included template looks this:

<div class="easybox" ng-controller="companycontroller" ng-init="init()"> <span>nothing see @ all</span> </div> 

and has following controller:

myapp.controller('companycontroller',function($scope,$http,$location) {     $scope.init=function() {         $http.get('company/get/mine').             success(function(data,status,headers,config) {                 aboutme=data;                 console.log("nice");             }).             error(function(data,status,headers,config){                 console.log("there error");                // redirecttologin();              });     },     $scope.aboutme }); 

now problem init()-function companycontroller called in endless loop. might cause issue , how can solved?

for one, should never use watched expression changes value on every digest cycle. "... + getrandom()" never stabilize - , cause "infinite loop", angular stops after 10 digest iterations.

if need avoid caching randomized url, calculate url once when controller function runs , assign scope variable:

$scope.menuurl = "dashboard/" + menu() + ".html?v=" + getrandom(); 

(also, saves having declare menu , getrandom on scope - keep private function within controller)

and use ng-include:

<div ng-include="menuurl"></div> 

another thing, although not related issue, use of ng-init - not @ needed. controller function run once (hence, init function) when ng-controller directive used:

myapp.controller('companycontroller', function($scope, $http, $location) {     $http.get('company/get/mine')         .success(function(data,status,headers,config) {             $scope.aboutme = data; // bug                                     // assigning data global var aboutme             console.log("nice");         })         .error(function(data,status,headers,config){             console.log("there error");             // redirecttologin();     }); }); 

Comments

Popular posts from this blog

jquery - How do you format the date used in the popover widget title of FullCalendar? -

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -