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

我有一個標題，它對於所有頁面都是通用的。所以，我把它包含在我的索引頁面中。angular js：無法將控制器的值傳遞給包含頁面的html

的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視圖中獲得價值？

來源

2016-06-17 Annabelle

儘量把NG-控制器=「CommonController」在header.html中UL標籤。因爲我認爲它沒有獲得訪問權限也必須把vm放在$ scope中，否則vm不能訪問。 – Neha

您應該將您的視圖與您的控制器相關聯。其實，你的CommonController沒有被引用到任何地方。嘗試添加NG控制器屬性的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>

，你也需要將值$範圍（這是你的模型）結合而以this。你的控制器看起來應該是這樣：

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

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

});

如果你想使用你的頭的看法「虛擬機」，您可以在NG-控制器更改爲ng-controller="CommonController as vm"。這應該做的伎倆。如果你不這樣做，你就必須更新了header.html到：

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

來源

2016-06-17 08:36:48 Paqman

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

回答

相關問題