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
Post a Comment