angular js：无法将值从控制器传递到包含页面的html

版本2

我有一个标题对于所有页面仍然通用。因此，我将其包含在索引页面中，如下所示。

index.html

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script src="assets/lib/angular.js"></script>
        <script src="assets/lib/angular-route.js"></script>

        <script src="headerController.js"></script>
        <script src="HomeController.js"></script>
        <script src="app.js"></script>
    </head>
    <body>
        <div class="header" ng-include="'header.html'"></div>
        <div class="main" ng-view></div>
    </body>
</html>

header.html

<ul>
    <li>{{vm.myName}}"></li>
</ul>

我的app.js文件如下所示。

( function () {

    angular.module('myApp', [
        'ngRoute',
        'myApp.header',
        'myApp.home',
    ])

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider
        .when('/home', {
            controller: 'HomeController',
            templateUrl: 'homeView.html',
            controllerAs: 'vm'
        })
        .otherwise({
            redirectTo: '/home'
        });
    }]);

})();

我不包括家庭控制器或视图，因为它们现在在这里的重要性降低了。我想做的是，将值传递给headerController.js视图header.html

如您所见，header.html中只有一个变量

另一方面，headerController.js与后端服务进行通信并获取此结果。而且，我确定该服务正在返回数据，我可以在控制台中看到它，它看起来像这样：

{"myName":"Amelia Earheart"}

这是我的headerController.js

(function() {

    angular
        .module('myApp.header', [])

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

        .controller('CommonController', function($scope, $routeParams, myCommonService) {

            var vm = this;  
            myCommonService.getName().success(function(data) {
                vm.myName   = data.myName;
            });

        });
})();

谁能说出为什么我没有在html视图中获得价值？

帕克曼

您应该将视图链接到控制器。实际上，您的CommonController在任何地方都没有被引用。尝试将ng-controller属性添加到div.header：

<!DOCTYPE html>
<html ng-app="myApp">
    <head>
        <script src="assets/lib/angular.js"></script>
        <script src="assets/lib/angular-route.js"></script>

        <script src="headerController.js"></script>
        <script src="HomeController.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>

而且，您还需要将该值绑定到$ scope（这是您的模型）而不是this。您的控制器应如下所示：

.controller('CommonController', function($scope, $routeParams, myCommonService) {

    myCommonService.getName().success(function(data) {
        $scope.myName   = data.myName;
    });

});

如果要在标题视图中使用“ vm”，则可以将ng-controller更改为ng-controller="CommonController as vm"。这应该可以解决问题。如果不这样做，则必须将header.html更新为：