当模型被事件更改时如何呈现 Angular 视图?
How to render an Angular view when the model is changed by events?
我需要在按下按钮时隐藏'Visible block',但片刻之后又出现了,没有按下按钮。这个版本不行。
<!DOCTYPE html>
<html ng-app="app">
<script src="angular.min.js"></script>
<body ng-controller="MyController as ctrl">
<div ng-show="isShow">Visible block</div>
<button ng-click="ctrl.change()">Hide Block</button>
</body>
<script>
var app = angular.module('app', []);
app.controller('MyController', function ($scope) {
$scope.isShow = true;
this.change = function() {
$scope.isShow = false;
setTimeout(function() {
$scope.isShow = true;
}, 1000)
}
});
</script>
</html>
您需要使用 Angular 的 $timeout
而不是通常的 setTimeout
,像这样:
$timeout(function() {
$scope.isShow = true;
}, 1000)
这是因为 setTimeout
在 $digest
之外工作; Angular 的包装解决了这个问题。
我需要在按下按钮时隐藏'Visible block',但片刻之后又出现了,没有按下按钮。这个版本不行。
<!DOCTYPE html>
<html ng-app="app">
<script src="angular.min.js"></script>
<body ng-controller="MyController as ctrl">
<div ng-show="isShow">Visible block</div>
<button ng-click="ctrl.change()">Hide Block</button>
</body>
<script>
var app = angular.module('app', []);
app.controller('MyController', function ($scope) {
$scope.isShow = true;
this.change = function() {
$scope.isShow = false;
setTimeout(function() {
$scope.isShow = true;
}, 1000)
}
});
</script>
</html>
您需要使用 Angular 的 $timeout
而不是通常的 setTimeout
,像这样:
$timeout(function() {
$scope.isShow = true;
}, 1000)
这是因为 setTimeout
在 $digest
之外工作; Angular 的包装解决了这个问题。