angularJS- 从控制器发起 HTTP 调用失败

Question

我正在使用 angularJS 和 PHP 构建网站。网站有很多页面，例如主页、关于我们等

因此，我为网站创建了一个公共 header，我将其包含在我的 HTML 视图中，如下所示：

<!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 (header.html) 页面如下所示：

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

和 header 控制器有一个获取用户 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;
            }); 
        });
})();

但是当我浏览页面时，header 保持不变。所以，我无法启动该 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：我排除了其他页面以降低复杂性并使我的查询易于理解。

谢谢！

Answer 1

你应该可以做到这一点：

.when('/login', {
        controller: 'LoginController',
        templateUrl: 'loginView.html', 
        resolve: function(){ //your code here }
        controllerAs: 'vm'
    })

而不是从控制器获取它

Answer 2

我认为您的问题可能是 include 无法读取控制器，所以试试这个：

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

请注意，您还缺少 controllerAs 语法，所以我添加了它。

并从此处删除 ng-controller：

<div class="header" ng-include="'header.html'"></div>

Answer 3

在我看来，所缺少的只是让模板知道控制器的作用域别名

<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- 从控制器发起 HTTP 调用失败

angularJS- initiate HTTP Call from a controller failed

angularjs

angular-controller