我正在学习 MEAN，现在我对使用 AngularJS JavaScript v.1.2.19 制作的前 View 有疑问。
这是我的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 View 和 homeCtrl)在我调用时完美运行(两种方式绑定(bind)都可以)并且自定义指令也可以工作正常。
但是第二条路由(/common/views/genericText.view.html View 和aboutCtrl)有问题。自定义指令没问题，但未显示来自 Controller 的值。
我试过几个测试:
将 HTML 文件和 Controller
*.js文件放在同一目录中。在浏览器的控制台中显示来自 Controller 的几条消息，并在 html 中添加个性化评论(以检查两个文件是否被正确请求和执行)
检查 HTML(使用 Chrome 开发工具) View 并检查 Angular 变量是否为空或没有任何值。
所有这些都没有成功。
我使用了 3 个自定义指令(一个导航栏、一个页眉和一个页脚)，它们在 HTML 中正确呈现。但是在 Controller 中创建的值没有被渲染，所以主体是空的。
这些是我的有问题的文件:
关于.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
}
})();
和 View 文件
<!-- 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>
我没有包含指令源，因为它们在 View 中显示正确。唯一的问题是 Controller 中的绑定(bind)值。
也许 controller as 语法有问题，或者上下文有问题，但我是新手，所以我找不到任何关于正在发生的事情的线索。
最佳答案
第二个路由的 ControllerAs 中有一个大写的 C，并且键在 javascript 中区分大小写。
关于javascript - AngularJS 1.2.19 双向绑定(bind)不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35211808/