Question

我正在使用angularJS和PHP构建一个网站。网站有很多页面，如Home，About Us等。

所以，我为网站创建了一个公共标题，我在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.html）页面如下所示：

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

和标题控制器有一个http调用，用于获取用户ID，我试图将此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：我排除了其他页面以降低复杂性并使我的查询易于理解。

谢谢！

Answer 1

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

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

Answer 2

你应该可以这样做：

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

而不是从控制器获取它

Answer 3

我认为您的问题可能是包含无法读取控制器，因此请尝试以下操作：

<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>

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

3 个答案: