Angularjs - 控制器多次调用 init() 函数
Angularjs - Controller call init() function multiple times
我在制作 angularjs 应用程序时遇到问题。
我创建了一个控制器并将其绑定到 routeProvider 中。具有像这样初始化控制器值的功能。
angular.module('app.Login', ['app.rpc','ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: '/static/tour/app/login/login.html',
controller: 'loginController'
});
}])
.controller('loginController', function($scope, $location, rpc) {
$scope.init = function() {
$scope.error = "";
console.log("Login Initialized");
}
$scope.init();
});
对于 login.html 这样的
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="page-header">Login</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="alert alert-danger alert-dismissable" role="alert" ng-show="error">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Error: </strong>
<span>{{error}}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<form>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" ng-model="username" placeholder="Username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" ng-model="password" placeholder="Password">
</div>
<button class="btn btn-primary action-btn" ng-click="login()">Login</button>
</form>
</div>
</div>
</div>
当我 运行 应用程序时,它会像这样调用 init() 3 次。
login
在这个Whosebug中发现很多人也有这个烦恼。所有这些都通过确保控制器绑定不超过一次(在 routProvider 和模板中)并检查模板中只有一个 ng-app 来解决。
我的主要html是这样的。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Touring</title>
<!--Bootstrap-->
<link rel="stylesheet" href="/static/tour/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/tour/css/bootstrap-theme.min.css">
<!--/Bootstrap-->
</head>
<body>
<ng-view><ng-view>
<!--Angular-->
<script src="/static/tour/js/angular.min.js"></script>
<script src="/static/tour/js/angular-route.min.js"></script>
<script src="/static/tour/js/angular-cookies.min.js"></script>
<!--/Angular-->
<!--App-->
<script src="/static/tour/app/app.js"></script>
<script src="/static/tour/app/rpc/app-rpc.js"></script>
<script src="/static/tour/app/login/app-login.js"></script>
<script src="/static/tour/app/dashboard/app-dashboard.js"></script>
<script src="/static/tour/app/memo/app-memo.js"></script>
</body>
</html>
对于我这样的主应用程序。
angular.module('app',
['ngCookies',
'ngRoute',
'app.Login',
'app.Dashboard',
'app.Memo',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
resolve: {
"check": function($cookies, $location) {
if(!$cookies.get("user_id")) {
$location.path("/login");
}
else {
$location.path("/dashboard");
}
}
}
})
.when('/logout', {
resolve: {
"check": function($cookies, $location) {
if($cookies.get("user_id")){
alert("You have been Logout");
}
$cookies.remove("user_name");
$cookies.remove("user_id");
$cookies.remove("token");
$cookies.remove("dbname");
$location.path("/login");
}
}
});
}]);
对于这个控制器没问题,我只是想初始化一个文本,但在某些需要向服务器端发出 AJAX 请求的控制器中初始化是不行的,可能会发出太多的请求以供注意。任何人都可以解决这个问题,请帮助我。谢谢。
PS1。我的练习基于 angular-seed https://github.com/angular/angular-seed
PS2。起初,我还使用了 jquery,它显示警告:尝试加载 angular 不止一次。一旦我删除 jquery 它再也不会显示警告,但它并没有解决我的问题
关于您的多方法调用,您确定您当前的 URL 与 $routeProvider
配置中定义的完全相同吗? (也许 ngRoute 从 /login/
重定向到 /login
并调用你的控制器两次)
PS2. At first, I also used jquery and it show WARNING: Tried to load angular more than once. Once I remove jquery it never show warning again, but it didn't fix my problem
AngularJS 已经包含 jQuery 的精简版:jqLite。如果 jQuery 在 Angular 之前加载,最后一个将使用它。如果没有,它使用内置的精简版。
在您的情况下,错误可能是由于 jQuery 在 Angular 加载 之后 加载。 Angular 已经加载了它的版本,你再加载一次。
尝试在 Angular 之前加载 jQuery 或根本不加载它。
我已经解决了
<ng-view><ng-view>
改用这个
<div ng-view></div>
我在制作 angularjs 应用程序时遇到问题。 我创建了一个控制器并将其绑定到 routeProvider 中。具有像这样初始化控制器值的功能。
angular.module('app.Login', ['app.rpc','ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
templateUrl: '/static/tour/app/login/login.html',
controller: 'loginController'
});
}])
.controller('loginController', function($scope, $location, rpc) {
$scope.init = function() {
$scope.error = "";
console.log("Login Initialized");
}
$scope.init();
});
对于 login.html 这样的
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="page-header">Login</h1>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="alert alert-danger alert-dismissable" role="alert" ng-show="error">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Error: </strong>
<span>{{error}}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<form>
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" ng-model="username" placeholder="Username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" ng-model="password" placeholder="Password">
</div>
<button class="btn btn-primary action-btn" ng-click="login()">Login</button>
</form>
</div>
</div>
</div>
当我 运行 应用程序时,它会像这样调用 init() 3 次。 login
在这个Whosebug中发现很多人也有这个烦恼。所有这些都通过确保控制器绑定不超过一次(在 routProvider 和模板中)并检查模板中只有一个 ng-app 来解决。 我的主要html是这样的。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>Touring</title>
<!--Bootstrap-->
<link rel="stylesheet" href="/static/tour/css/bootstrap.min.css">
<link rel="stylesheet" href="/static/tour/css/bootstrap-theme.min.css">
<!--/Bootstrap-->
</head>
<body>
<ng-view><ng-view>
<!--Angular-->
<script src="/static/tour/js/angular.min.js"></script>
<script src="/static/tour/js/angular-route.min.js"></script>
<script src="/static/tour/js/angular-cookies.min.js"></script>
<!--/Angular-->
<!--App-->
<script src="/static/tour/app/app.js"></script>
<script src="/static/tour/app/rpc/app-rpc.js"></script>
<script src="/static/tour/app/login/app-login.js"></script>
<script src="/static/tour/app/dashboard/app-dashboard.js"></script>
<script src="/static/tour/app/memo/app-memo.js"></script>
</body>
</html>
对于我这样的主应用程序。
angular.module('app',
['ngCookies',
'ngRoute',
'app.Login',
'app.Dashboard',
'app.Memo',
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/', {
resolve: {
"check": function($cookies, $location) {
if(!$cookies.get("user_id")) {
$location.path("/login");
}
else {
$location.path("/dashboard");
}
}
}
})
.when('/logout', {
resolve: {
"check": function($cookies, $location) {
if($cookies.get("user_id")){
alert("You have been Logout");
}
$cookies.remove("user_name");
$cookies.remove("user_id");
$cookies.remove("token");
$cookies.remove("dbname");
$location.path("/login");
}
}
});
}]);
对于这个控制器没问题,我只是想初始化一个文本,但在某些需要向服务器端发出 AJAX 请求的控制器中初始化是不行的,可能会发出太多的请求以供注意。任何人都可以解决这个问题,请帮助我。谢谢。
PS1。我的练习基于 angular-seed https://github.com/angular/angular-seed
PS2。起初,我还使用了 jquery,它显示警告:尝试加载 angular 不止一次。一旦我删除 jquery 它再也不会显示警告,但它并没有解决我的问题
关于您的多方法调用,您确定您当前的 URL 与 $routeProvider
配置中定义的完全相同吗? (也许 ngRoute 从 /login/
重定向到 /login
并调用你的控制器两次)
PS2. At first, I also used jquery and it show WARNING: Tried to load angular more than once. Once I remove jquery it never show warning again, but it didn't fix my problem
AngularJS 已经包含 jQuery 的精简版:jqLite。如果 jQuery 在 Angular 之前加载,最后一个将使用它。如果没有,它使用内置的精简版。
在您的情况下,错误可能是由于 jQuery 在 Angular 加载 之后 加载。 Angular 已经加载了它的版本,你再加载一次。
尝试在 Angular 之前加载 jQuery 或根本不加载它。
我已经解决了
<ng-view><ng-view>
改用这个
<div ng-view></div>