关于bind：AngularJS数据绑定不起作用

AngularJS data binding not working

我在http://jsfiddle.net/gsche/1/

上写了一些简化的代码

当我单击"刷新"链接时，" customer.name"模型不会更新视图。

我在本地计算机上编写了代码，并在Chrome中使用Batarang对其进行了调试。

控制台未显示任何错误。 Batarang的"模型"页面显示了在右侧更改的客户名称，该名称与旧的作用域ID相关联，但是$ scopes的ID也发生了更改。

有人能指出我正确的方向吗？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<p> Refresh </p>
<p>
<input type="text" ng-model="customer.name">
</p>
<p>{{ customer.name }}</p>

function MainCtrl($scope) {

$scope.customer = {
name: 'TTT',
id: 0
};

$scope.Refresh = function ($scope) {
$scope.customer.name = 'Test';

};

}

更新1 2013年8月8日
谢谢大家(@ EpokK，@ Stewie，@ Hippocrates)。我现在不理解jsfiddle的问题，该示例可以正常工作。

但是，在我的测试应用程序中，{{customer.name}}绑定有效，但是单击"刷新"仍不会更改视图中的{{customer.name}}。

这是我的申请的内容。我认为这与jsfiddle示例相同：

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!doctype html>
<head>
Test
</head>
<body ng-app="roaMobileNgApp">

<script src="scripts/angular.js">

<script src="scripts/angular-ui.js">
<link rel="stylesheet" href="scripts/angular-ui.css">

<script src="scripts/app.js">
<script src="scripts/controllers/main.js">

</body>
</html>

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13

'use strict';

angular.module('roaMobileNgApp', ['ui'])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

'use strict';

angular.module('roaMobileNgApp')
.controller('MainCtrl', function ($scope) {

$scope.customer = {name: '',
id: 0};

$scope.getDetails = function() {
$scope.customer.name = 'Test';
};

});

main.html

1 2	Refresh <p><input type="text" ng-model="customer.name"> {{ customer.name }} </p>

检查我的解决方案，我已经编辑了您的JSFiddle：http://jsfiddle.net/gsche/10/

1
2
3
4
5
6
7
8
9
10
11
12

function MainCtrl($scope) {

$scope.customer = {
name: 'TTT',
id: 0
};

$scope.getDetails = function () {
$scope.customer.name = 'Test';
};

}

只需在小提琴选项中选择" No wrap-in"(因为否则演示将无法工作)，然后从Refresh函数中删除$scope参数。您不需要传递$scope，因为函数本身是在$ scope中定义的。

1
2
3

$scope.getDetails = function(){
$scope.customer.name = 'Test';
};