Question

我有一个标题，对所有页面都是常见的。所以，我把它包含在我的索引页面中。

的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视图中获得该值？

Answer 1

您应该将视图与控制器相关联。实际上，您的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更新为：

<ul>
    <li>{{myName}}</li>
</ul>

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

1 个答案: