1
すべてのページに共通のヘッダーがあります。だから、私はこのような私のインデックスページにそれを含めた。角度js：コントローラーからインクルードされたページのhtmlに値を渡すことができません
<ul>
<li>{{vm.myName}}"></li>
</ul>
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マイ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'
});
}]);
})();
ここではあまり重要でないため、私は家のコントローラやビューを含めません。私は何をしようとしていることはあなたが見ることができるように、それの視界header.html
にheaderController.jsから値を渡すために、ある、headerController.jsはと通信し、私のheader.html反対側に
で唯一の変数が存在しますバックエンドサービスを呼び出し、この結果を取得します。そして、私は、データがサービスによって返される、私はコンソールでそれを見ることができると確信してい、それは次のようになります。
{"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ビューで値を得ていない理由を教えてください？
header.html ULタグにNG-コントローラ=「CommonController」を入れてみてください。私はそれもアクセスを取得しないと思うので、あなたは$スコープにVMを置く必要があります。そうでなければVMはアクセスではありません。 – Neha