AngularJS controllerAs:更新$interval中的controller字段不会更新ng show
AngularJS controllerAs: updating controller field in $interval does not update ng-show
我使用的是controllerAs语法,由于某种原因,在$interval中更新控制器的字段时,它无法在视图中正确显示/隐藏元素。我使用angular的UI路由器。
我认为这个问题最好用代码来描述,所以请原谅代码转储。
我的状态("refreshLogs"只是一个调用logService获取更新日志的函数):
angular.module('portal')
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('logs', {
'abstract': true,
views: {
"@": { template: '<div ui-view></div>' }
}
})
.state('logs.view', {
url: '/logs/:id',
resolve: {
log: function ($stateParams, logService) {
return logService.getLog($stateParams.id);
},
refreshLog: function ($stateParams, logService) {
var id = $stateParams.id
var fn = function (id) {
return logService.getLog(id)
};
return function() { return fn(id) }
}
},
templateUrl: '/app/logs/viewlog.html',
controller: 'logController',
controllerAs: 'vm'
})
});
我的控制器:
angular.module('portal.controllers')
.controller('logController', function ($state, log, refreshLog, $scope, $interval) {
var vm = this;
vm.log = log;
vm.refreshTimer = $interval(function () {
refreshLog().then(function (data) {
vm.log = data;
})
}, 15000);
$scope.$on("$destroy", function () {
if (angular.isDefined(vm.refreshTimer)) {
$interval.cancel(vm.refreshTimer);
}
});
});
最后是观点:
<div ng-show="{{ vm.log != null }}">
<div class="page-header">
<h1>{{ vm.log.JobType }} ({{ vm.log.JobResult }})</h1>
</div>
Parameters: {{ vm.log.JobParameters }}
<pre>{{ vm.log.Content }}</pre>
</div>
<div ng-show="{{ vm.log == null }}">
<div class="page-header">
<h1>Waiting for log...</h1>
</div>
</div>
它在DOM更新中显示"ng-show"值,但元素不会基于该值显示/隐藏。我在Chrome中检查了DOM,看到了以下内容(添加星号以强调):
<div ui-view="" class="ng-scope"><div ng-show="**false**" class="ng-binding ng-scope ng-hide">
<div class="page-header">
<h1 class="ng-binding"> ()</h1>
</div>
Parameters:
<pre class="ng-binding"></pre>
</div>
<div ng-show="**true**" class="ng-scope">
<div class="page-header">
<h1>Waiting for log...</h1>
</div>
</div></div>
从哪个开始是正确的,并且显示了正确的div。几秒钟后,日志被刷新,"vm.log"变量被设置为非null值(我知道这一点,因为我在分配该值的JS代码中设置了一个断点,它看起来是正确的)。之后,我再次检查DOM,并看到以下内容:
<div ui-view="" class="ng-scope"><div ng-show="**true**" class="ng-binding ng-scope ng-hide">
<div class="page-header">
<h1 class="ng-binding">...</h1>
</div>
...
</pre>
</div>
<div ng-show="**false**" class="ng-scope">
<div class="page-header">
<h1>Waiting for log...</h1>
</div>
</div></div>
请注意,"ng-show"属性显示了正确的值。因此,该表达式显然已被重新评估。然而,旧的"Waiting for log…"标题仍然显示,并且第一个div没有显示(并且它仍然应用了"ng-hide"css类)。
我在这里错过了什么?
ng-show
绑定中!那里不应该有{{ ... }}
。移除支架解决了这个问题。
相关文章:
- 在visualforce中为更新字段分配HTML链接/按钮
- 反应:以动态生成的形式根据另一个字段更新字段值
- PHP通过AJAX更新字段值
- AngularJS:更改对象不会更新字段,但直接更改字符串会更新字段
- MongoDB:用反值更新字段编号
- MongoDB:将字段移动到新文档并更新字段和数组
- 为什么Javascript对象不更新字段
- 基于计算的自动更新字段
- 如何在流星中自动更新字段
- 我想在 VF 页面上选中复选框时更新字段
- 使用jquery don'更新字段;t更新可观察到的
- 在更改事件jquery上更新字段值
- 如何通过乘以字段值Mongodb来更新字段
- Javascript更新字段的总和
- 使用复选框自动更新字段
- 如何动态更新字段而不刷新和不调用服务器
- 如何使用REST API用新值更新字段
- 当用程序更新字段时,如何在更新时运行jquery函数
- 检查文本框是否已更改.如果是,更新字段
- Jquery,更新字段和启用按钮