angular js：無法將值從控制器傳遞到包含頁面的html

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 個解決方案

解決方案1
2 已采納 2016-06-17 08:36:48

angular js：無法將值從控制器傳遞到包含頁面的html

問題描述

1 個解決方案

解決方案1 2 已采納 2016-06-17 08:36:48

解決方案1
2 已采納 2016-06-17 08:36:48