如何在Angular中更新视图（避免$已在应用中）？

我想在应用程序中显示某个逻辑时显示按钮（某个按钮），然后隐藏此按钮。

通过单击某个按钮，我调用expand（）将data.loading设置为true，此时我想要按钮出现，当我将data.loading设置为false时我想隐藏按钮，但视图不是更新。

<button ng-show="data.loading">Some Button</button> 
<button ng-click="expand(data)">Other Button</button>

功能：

$scope.expand = function (data) { 
    data.loading = true; 
    // Some Button must be visible now 
    // Some logic here; 
    data.loading = false; 
    // Some Button must be invisible now 
}

$范围$适用（） - 返回错误：$正在进行

$ scope.safeApply（）已经申请 - 不会抛出异常，但不更新视图。

$ timeout - 不更新视图。

来源

2017-01-30 Tom A. J.

这里有什么'逻辑逻辑部分 - 你在视图中也有'nng-click'。 – tymeJV

@tymeJV //这里的逻辑是调用api，nng点击它的错字，修复 –

请发表逻辑 - 这可能是整个问题的原因... – tymeJV

引用通过$scope属性数据模型与出当前消化周期的移动你的主要逻辑（与$timeout or $evalAsync）应该在你的情况下，解决“$已申请在进步”的消息一起：

$scope.expand = function() { 
    $scope.data.loading = true; 
    $timeout(function() { 
     // Some logic here; 
     $scope.data.loading = false; 
    }); 
};

我通常更喜欢（1）在服务内部保持加载进度，（2）使用承诺来管理进度状态。在下面的例子中，logicFunction()返回一个承诺。

$scope.expand = function() { 
    progressStatusService.started("Loading something…") 
    logicFunction().finally(function() { 
     progressStatusService.finished("Loading something…") 
    }); 
}; 
// progressStatusService implementation left as a challenge to the reader

全球进步服务主要是面向应用级负载指示，如果加载状态只影响一个特定的部件，那么它可能是一个开销。

但是，延期/承诺方法可能通常有用且易于阅读（请参阅$q上的更多文档）。

来源

2017-01-30 14:10:17 Tony

$scope.expand = function() { 
    $scope.data.loading = true; 
    // Some Button must be visible now 
    // Some logic here; 
    $scope.data.loading = false; 
    // Some Button must be invisible now 
}

来源

2017-01-30 14:09:56

按照@Sreehari的建议使用$scope.data.loading，在您查看时使用ng-if而不是ng-show。

来源

2017-01-30 14:12:55

如何在Angular中更新视图（避免$已在应用中）？

回答

相关问题