Question

我有以下“主模板”：

<html ng-app="myApp"><head/>
<body ng-controller="HomeController">
<div class="container" id="mainContent" ng-include="'dashboard/'+menu()+'.html?v='+getRandom()"></div>
</body>

在家庭控制器内部，我根据“菜单”参数包含内容：

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();
    });
});

（随机部分仅用于在我的开发环境中停止缓存）

包含的模板如下所示：

<div class="easyBox" ng-controller="CompanyController" ng-init="init()">
<span>nothing to see at all</span>
</div>

并拥有以下控制器：

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 was an error");
               // redirectToLogin();

            });
    },
    $scope.aboutMe
});

现在的问题是来自companyController的init（） - 函数是在无限循环中调用的。可能导致此问题的原因以及如何解决？

Answer 1

首先，你不应该使用在每个摘要周期都改变其值的监视表达式。 "... + getRandom()"永远不会稳定 - 并且会导致“无限循环”，Angular在10次迭代迭代后停止。

如果您需要避免使用随机URL进行缓存，请在控制器函数运行时计算一次URL并将其分配给范围变量：

$scope.menuUrl = "dashboard/" + menu() + ".html?v=" + getRandom();

（同样，您还可以免于在示波器上声明menu和getRandom - 只需将其保留为控制器中的私有函数）

并将其用于ng-include：

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

另一件事，虽然与您的问题无关，但是使用ng-init - 根本不需要它。当使用ng-controller指令时，控制器函数将运行一次（因此，它是init函数）：

myApp.controller('CompanyController', function($scope, $http, $location) {
    $http.get('company/get/mine')
        .success(function(data,status,headers,config) {
            $scope.aboutMe = data; // this was also a bug 
                                   // assigning data to a global var aboutMe
            console.log("nice");
        })
        .error(function(data,status,headers,config){
            console.log("there was an error");
            // redirectToLogin();
    });
});

使用ng-include

1 个答案: