gpt4 book ai didi

angularJS-从 Controller 发起 HTTP 调用失败

转载 作者:行者123 更新时间:2023-12-03 08:22:51 28 4
gpt4 key购买 nike

我正在使用 angularJS 和 PHP 构建一个网站。网站有许多页面,如主页、关于我们等。

因此,我为网站创建了一个通用 header ,并将其包含在我的 HTML View 中,如下所示:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="commonController.js"></script>
<script src="homeController.js"></script>
<script src="loginController.js"></script>

<script src="app.js"></script>

</head>
<body>
<div class="header" ng-controller="CommonController"
ng-include="'header.html'"></div>
<div class="main" ng-view></div>
</body>
</html>

页眉 (header.html) 页面如下所示:

<nav class="navbar-inverse navbar-fixed-top" role="navigation">
<a href="#/home">Home</a>
<a href="#/notifications" >{{vm.commonId}}</a>
</nav>

并且 header Controller 有一个获取用户 ID 的 http 调用,我试图将此 ID 显示为上述链接之一的标签 (commonController.js)

(function() {

angular
.module('myApp.common', ['ngRoute'])

.factory('myCommonService', function($http) {
var baseUrl = 'api/';
return {
getBasicUserInfo:function() {
return $http.get(baseUrl + 'getBasicUserInformation');
}
};
})

.controller('CommonController', function($scope, $routeParams, myCommonService) {
var vm = this;
myCommonService.getBasicUserInfo().success(function(data) {
vm.commonId = data.id;
});
});
})();

但是当我浏览页面时,页眉保持不变。所以,我无法启动该 http 调用。我的网站上有很多页面。

这能做到吗?我对这个平台还很陌生。

路由(app.js)

(function() {

angular.module('myApp', [
'ngRoute',
'myApp.login',
'myApp.home',
'myApp.common'
])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/login', {
controller: 'LoginController',
templateUrl: 'loginView.html',
controllerAs: 'vm'
})
.when('/home', {
controller: 'HomeController',
templateUrl: 'homeView.html',
controllerAs: 'vm'
})
.otherwise({
redirectTo: '/login'
});
}]);
})();

P.S:我排除了其他页面以降低复杂性并使我的查询易于理解。

谢谢!

最佳答案

在我看来,所缺少的只是让模板知道 Controller 的作用域别名

<div class="header" ng-controller="CommonController as common"
ng-include="'header.html'"></div>

并在 header.html

<a href="#/notifications">{{common.commonId}}</a>

请注意,我使用的是 common 而不是 vm,因为您的某些路由正在使用 vm 并且最好避免冲突。


如果你想触发页面导航的更新(即路由更改),请将你的 CommonController 更改为此

.controller('CommonController', function($scope, myCommonService) {
var ctrl = this;
var update = function() {
myCommonService.getBasicUserInfo().then(function(res) {
ctrl.commonId = res.data.id;
});
};
update();

$scope.$on('$routeChangeSuccess', update);
});

关于angularJS-从 Controller 发起 HTTP 调用失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40021558/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com