【发布时间】：2016-05-14 16:50:29
【问题描述】：
我正在学习 MEAN，现在我对使用 AngularJS JavaScript v.1.2.19 制作的前视图有疑问。
这是我的 index.html
<!DOCTYPE html>
<html ng-app="loc8rApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body ng-view>
<!--ng-view directive now sits in body tag so that we can control full page in Angular-->
<!--script src="/angular/angular.min.js"></script-->
<script src="/angular/angular.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/app.js"></script>
<script src="/common/services/loc8rData.service.js"></script>
<script src="/common/services/geolocation.service.js"></script>
<script src="/common/directives/ratingStars/ratingStars.directive.js"></script>
<script src="/common/directives/footerGeneric/footerGeneric.directive.js"></script>
<script src="/common/directives/navigation/navigation.directive.js"></script>
<script src="/common/directives/pageHeader/pageHeader.directive.js"></script>
<script src="/common/filters/formatDistance.filter.js"></script>
<script src="/home/home.controller.js"></script>
<script src="/about/about.controller.js"></script>
<script src="/javascripts/jquery-1.11.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/javascripts/validation.js"></script>
</body>
</html>
这是我在客户端的 app.js
(function () {
angular.module('loc8rApp', ['ngRoute']);
function config ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/about',{
templateUrl: '/common/views/genericText.view.html',
controller: 'aboutCtrl',
ControllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
}
angular
.module('loc8rApp')
.config(['$routeProvider', '$locationProvider', config]);
})();
第一条路线（home/home.view.html 视图和homeCtrl）在我调用时完美运行（两种方式绑定都可以），并且自定义指令也可以正常运行。
但是第二条路线（/common/views/genericText.view.html视图和aboutCtrl）有问题。自定义指令没问题，但未显示来自控制器的值。
我已经尝试了几个测试：
将 HTML 文件和控制器
*.js文件放在同一目录中。在浏览器的控制台中显示来自控制器的多条消息，并在 html 中添加个性化的 cmets（以检查两个文件是否被正确请求和执行）
检查 HTML（使用 Chrome 开发工具）视图并检查角度变量是否为空或没有任何值。
都没有成功。
我使用了 3 个自定义指令（导航栏、页眉和页脚），它们在 HTML 中正确呈现。但是控制器中创建的值没有渲染，所以body是空的。
这些是我有问题的文件：
关于.controller.js
(function () {
angular
.module('loc8rApp')
.controller('aboutCtrl', aboutCtrl);
function aboutCtrl() {
var vm = this;
console.log('debug'); //shown console
vm.pageHeader = {
title: 'test',
strapline: 'this is the strapline'
};
vm.main = {
content: "this is the content"
};
vm.yeah = "this is for testing";
console.log(vm.pageHeader.title); //shown at console
console.log(vm.main.content); //shown console
console.log(vm.yeah); //shown console
}
})();
还有视图文件
<!-- custom directive -->
<navigation></navigation>
<div class="container">
<!-- custom directive -->
<page-header content="vm.pageHeader"></page-header>
<div class="row">
<div class="col-xs-12 col-sm-8">
<div>{{ vm.main.content }}</div>
<div>{{ vm.yeah }}</div>
</div>
</div>
<!-- custom directive -->
<footer-generic></footer-generic>
</div>
我没有包含指令源，因为它们在视图中正确显示。唯一的问题是控制器中的绑定值。
也许controller as 语法有问题，或者上下文有问题，但我是新手，所以我找不到任何关于正在发生的事情的线索。
【问题讨论】：
-
加载此控制器时控制台是否出现任何错误？
-
不，控制器加载正常。该问题是由 app.js 中的拼写错误引起的。非常感谢您的评论。
标签： javascript angularjs html data-binding