OnsenUI AngularJS 数据绑定无法正常工作
OnsenUI AngularJS data binding not working properly
我创建了一个简单的例子来说明我将要做的事情:
ons.bootstrap()
.controller('AppController', function($scope) {
$scope.x = 0;
setInterval(function() {
$scope.x = $scope.x + 1;
}, 500)
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/1.3.15/js/onsenui.min.js"></script>
<ons-page ng-controller="AppController">
<ons-list>
<ons-list-header>Switch</ons-list-header>
<ons-list-item>
<br/>
This value should change every 500 milisecond: {{ x }}
<br/>
</ons-list-item>
<ons-list-item>
<div class="center">
Switch is {{ switch ? 'on' : 'off' }}
</div>
<div class="right">
<ons-switch ng-model="data.switch"></ons-switch>
</div>
</ons-list-item>
</ons-list>
</ons-page>
作为一个正常的 angular(two-way data binding)应用程序,控制器中的任何更改都会导致视图更新,反之亦然。
但结合 OnsenUI 视图更新仅在一个温泉组件更改更新视图时发生。有什么方法可以通知温泉发生了什么(需要查看更新)。
这样试试
ons.bootstrap()
.controller('AppController', function($scope) {
$scope.x = 0;
setInterval(function() {
$scope.$evalAsync(function () {
$scope.x = $scope.x + 1;
});
}, 500)
});
编辑:
或者使用 $interval
正如@Pankaj Parkar 所说 this.before 使用 $interval
你应该在你的控制器中注入这个服务。
$interval(function () {
$scope.x = $scope.x + 1;
}, 500);
我创建了一个简单的例子来说明我将要做的事情:
ons.bootstrap()
.controller('AppController', function($scope) {
$scope.x = 0;
setInterval(function() {
$scope.x = $scope.x + 1;
}, 500)
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/1.3.15/js/onsenui.min.js"></script>
<ons-page ng-controller="AppController">
<ons-list>
<ons-list-header>Switch</ons-list-header>
<ons-list-item>
<br/>
This value should change every 500 milisecond: {{ x }}
<br/>
</ons-list-item>
<ons-list-item>
<div class="center">
Switch is {{ switch ? 'on' : 'off' }}
</div>
<div class="right">
<ons-switch ng-model="data.switch"></ons-switch>
</div>
</ons-list-item>
</ons-list>
</ons-page>
作为一个正常的 angular(two-way data binding)应用程序,控制器中的任何更改都会导致视图更新,反之亦然。 但结合 OnsenUI 视图更新仅在一个温泉组件更改更新视图时发生。有什么方法可以通知温泉发生了什么(需要查看更新)。
这样试试
ons.bootstrap()
.controller('AppController', function($scope) {
$scope.x = 0;
setInterval(function() {
$scope.$evalAsync(function () {
$scope.x = $scope.x + 1;
});
}, 500)
});
编辑:
或者使用 $interval
正如@Pankaj Parkar 所说 this.before 使用 $interval
你应该在你的控制器中注入这个服务。
$interval(function () {
$scope.x = $scope.x + 1;
}, 500);