Question

我在一个动态确定的对象上有很多属性：

$scope.buttons.isVisible = {
                buttonOne:      $scope.timeBetween > -(60 * 60) && $scope.timeBetween < 30,
                buttonTwo:      $scope.timeBetween > -(60 * 15) && $scope.timeBetween < -(60 * 8),
                buttonThree:    $scope.timeBetween > -(60 * 15)
}

我使用这些变量来确定页面上某些按钮的可见性：

<button class="canned-response" ng-if="buttons.isVisible.buttonOne">Button Text</button>

变量$scope.timeBetween每秒更新一次函数，这是一个倒计时指令的回调：

$scope.setTimeBetween = function(relativeSecondsBetween) {
    $scope.timeBetween = relativeSecondsBetween;
};

该指令的使用示例：

<countdown countdown-to="someVar" callback="setTimeBetween"></countdown>

问题是正在对$scope.timeBetween进行更改，但这些更改不会传播到我的按钮可见性布尔值。

如果我尝试在$scope.$apply()功能结束时拨打setTimeBetween，我会收到正在进行的＆＃34;摘要＆＃34;错误。在$timeout中包装变量赋值也没有任何作用。

最佳解决方案是什么？

Answer 1

您需要查看$ scope.timeBetween以进行更改，然后更新按钮可见性对象。

$scope.$watch(function() {
    return $scope.timeBetween;
}, function(newValue, oldValue) {
    $scope.buttons.isVisible = {
        buttonOne: newValue > -(60 * 60) && newValue < 30,
        buttonTwo: newValue > -(60 * 15) && newValue < -(60 * 8),
        buttonThree: newValue > -(60 * 15)
    };
});

此外，作为最佳实践，您应该在指令的链接功能中设置此监视，而不是控制器。

Answer 2

按钮可见性布尔值仅评估一次。

一种解决方案是将它们定义为函数：

buttonOne: function () {
    return $scope.timeBetween...;
}

然后在ng-if：

中调用函数

ng-if="buttons.isVisible.buttonOne()"

Angular变量未更新，尝试调用$ apply会导致＆＃34;摘要已在进行中＆＃34;错误

2 个答案: