单向绑定在AngularJS和setInterval中不起作用
AngularJS是角的第一个版本，不再相关。但是当我开始学习Angular4时，我想从AngularJS开始，这样我就可以探索框架的基本原理和目标了。
下面的代码是演示单向数据绑定(更改模型，重新呈现视图)，但无法实现。
<p>One-Way Data-Binding: {{place}}</p> 不是每次"$scope.place"发生更改时都会更新。我认为这段应该在每次$scope.place值更改时重新呈现，因为我们创建了与place模型的单向数据绑定。
这个代码有错误吗？
使用一次绑定(静态页面？)、单向绑定(库存信息)和双向绑定(更多交互站点)的最佳用例是什么？
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script>
var app = angular.module('OneTimeBinding', []);
app.controller('OneTimeBindingController', function($scope) {
$scope.i = 0;
$scope.places = [
'Delhi', 'Gurgaon', 'Haryana', 'Punjab', 'Chennai', 'Noida', 'Mumbai', 'Pune', 'Nepal', 'Gujrat', 'Bihar', 'Uttrakhand'
];
$scope.place = "Delhi";
setInterval(function() {
$scope.place = $scope.places[$scope.i];
$scope.i++;
if ($scope.i > 10) {
$scope.i = 0;
}
console.log("$scope.place")
},
1000
)
});
</script>
</head>
<body ng-app="OneTimeBinding" ng-controller="OneTimeBindingController">
<div>
<h2>Difference between One-Time and One-Way Data Bindings</h2>
<br />
<p>One-Time Data-Binding: {{::place}}</p>
<p>One-Way Data-Binding: {{place}}</p>
</div>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2018-06-14 14:40:50
您需要使用$interval，因为它是AngularJS摘要周期的一部分。将其插入控制器并替换setInterval
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script>
var app = angular.module('OneTimeBinding', []);
app.controller('OneTimeBindingController', function($scope, $interval) {
$scope.i = 0;
$scope.places = [
'Delhi', 'Gurgaon', 'Haryana', 'Punjab', 'Chennai', 'Noida', 'Mumbai', 'Pune', 'Nepal', 'Gujrat', 'Bihar', 'Uttrakhand'
];
$scope.place = "Delhi";
$interval(function() {
$scope.place = $scope.places[$scope.i];
$scope.i++;
if ($scope.i > 10) {
$scope.i = 0;
}
//console.log($scope.place)
},
1000
)
});
</script>
</head>
<body ng-app="OneTimeBinding" ng-controller="OneTimeBindingController">
<div>
<h2>Difference between One-Time and One-Way Data Bindings</h2>
<br />
<p>One-Time Data-Binding: {{::place}}</p>
<p>One-Way Data-Binding: {{place}}</p>
</div>
</body>
</html>
一次数据绑定可以用来减少观察者的数量.通常，当不能更改的预定义数据从后端到达时。或者当您用ng-repeat列出数据时，您已经有了想要显示但不需要任何观察者的东西。(他们负责消化周期的动态变化)
由于setInterval不是摘要周期的一部分，所以可以使用$scope.$apply()手动调用$digest。这是一个黑客，不建议使用。但是，当使用额外的DOM操作库(如jQuery )时，它可能很有用。下面是一个使用手工摘要的示例：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script>
var app = angular.module('OneTimeBinding', []);
app.controller('OneTimeBindingController', function($scope, $timeout) {
$scope.i = 0;
$scope.places = [
'Delhi', 'Gurgaon', 'Haryana', 'Punjab', 'Chennai', 'Noida', 'Mumbai', 'Pune', 'Nepal', 'Gujrat', 'Bihar', 'Uttrakhand'
];
$scope.place = "Delhi";
setInterval(function() {
$scope.place = $scope.places[$scope.i];
$scope.i++;
if ($scope.i > 10) {
$scope.i = 0;
}
//console.log($scope.place)
$scope.$apply(); // calling digest cycle
},
1000
)
});
</script>
</head>
<body ng-app="OneTimeBinding" ng-controller="OneTimeBindingController">
<div>
<h2>Difference between One-Time and One-Way Data Bindings</h2>
<br />
<p>One-Time Data-Binding: {{::place}}</p>
<p>One-Way Data-Binding: {{place}}</p>
</div>
</body>
</html>
https://stackoverflow.com/questions/50859895
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号