Question

我的Chrome扩展程序使用ng-show表达式检查Chrome存储的变量，如果值为零则显示一个蓝色的大按钮。但是，打开扩展程序时，按钮可能会在第一次单击时显示，或者您可能必须在显示之前关闭并重新打开该扩展几次（只显示一个空白的正文）。这令人难以置信的沮丧，显然是一个用户体验问题，我想在向公众发布扩展之前解决这个问题。

以下是扩展程序主视图中的div代码：

<div id="no_vseeks" ng-show="vseeks.length === 0">
    <div class="big-button-container"><a href="#!newVSeeks" class="big-button"><h1>CREATE</h1></a></div>
</div>

该表达式指的是Chrome本地存储中名为“vseeks”的数组。

here是扩展应该输出的内容：

但this是扩展程序随机显示的内容（貌似）。

如果我需要添加更多代码或图片，请通知我。

编辑：这是从Chrome存储中检索vSeeks阵列的主控制器。控制台日志显示在调用chrome.storage.get函数后，数组存在，但我仍然得到一个空白视图。

app.controller('mainController', function($scope, $window) {
$scope.toggleAcc = function($event) {
    var currentAcc = $event.currentTarget;
    currentAcc.classList.toggle("active");
    var panel = currentAcc.nextElementSibling;
    if (panel.style.display === "block") {
        panel.style.display = "none";
    } else {
        panel.style.display = "block";
    }
}
$scope.sendID = function(id) {
    currentVID = id;
    $window.location.href = "#!delete";
}
var noVseeks;
var home_button;
var newV_button;

console.log('controller reached', $scope.vseeks);
chrome.storage.sync.get('userData', function(items){
    $scope.vseeks = items.userData.vSeeks;
    console.log('inside chrome storage get', $scope.vseeks);
    home_button = document.getElementById('home_button');
    newV_button = document.getElementById('newV_button');
    console.log('variables: ', home_button, newV_button);
    if ($scope.vseeks.length < 1) {
        home_button.style.visibility = "hidden";
        newV_button.style.visibility = "hidden";
    }
    else {
        newV_button.style.visibility = "visible";
        if (home_button.style.visibility == "visible") {
            home_button.style.visibility = "hidden";
        }
    }
});

}）;

Answer 1

我不熟悉Chrome.storage.sync但它必须返回非angularjs承诺（即不是$ q）。在那种情况下，你在解析时运行的函数是在角度摘要周期之外执行的 - angular不知道它应该做什么。强制角度运行其循环的方法是使用$scope.$apply。这将使模型与视图同步，反之亦然。

ng-show和/或ng-if在100％的时间内不起作用

1 个答案: