Javascript AngularJS范围变量设置不正确

我正在使用

electron-json存储

，并试图将AngularJS

$scope

变量设置为与存储的数据相等

下面是我的代码：

portal.controller('portalViewController', function($scope) {
    //$scope.url = "http://www.google.com"; //correctly sets $scope.url to google.com
    storage.get('portal_url', (err, data) => {
        console.log(data.url); //prints out data as it should
        $scope.url = data.url;
    });
});

正如您所看到的，我有这个工作的每个单独组件，但是当我组合它们时，

$scope.url

似乎没有被设置。我已经在这个问题上纠缠了一段时间，不知道问题出在哪里。我是AngularJS的新手，所以这可能是我遗漏的一些非常简单的东西

---

谢谢你能提供的任何帮助

因为

storage

似乎是第三方插件，所以

$scope

中的任何更改都不会执行摘要循环。使用

$timeout

强制执行摘要循环，以便在UI中呈现更改

portal.controller('portalViewController', function($scope, $timeout) {
    storage.get('portal_url', (err, data) => {
        console.log(data.url); //prints out data as it should
        $timeout(function(){
            $scope.url = data.url;
        });
    });
});

---

由于

storage

似乎是第三方插件，因此

$scope

中的任何更改都不会执行摘要循环。使用

$timeout

强制执行摘要循环，以便在UI中呈现更改

portal.controller('portalViewController', function($scope, $timeout) {
    storage.get('portal_url', (err, data) => {
        console.log(data.url); //prints out data as it should
        $timeout(function(){
            $scope.url = data.url;
        });
    });
});

---

如果回调确实来自AngularJS执行上下文之外的第三方源，则只需使用

$apply

：

portal.controller('portalViewController', function($scope) {
    storage.get('portal_url', (err, data) => {
        $scope.$apply(function() {
            $scope.url = data.url;
        });
    });
});

从文档中：

AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才会受益于AngularJS数据绑定、异常处理、属性监视等。。。您还可以使用

$apply（）

从JavaScript输入AngularJS执行上下文

请记住，在大多数地方（控制器、服务）

$apply

已由处理事件的指令为您调用。只有在实现自定义事件回调或使用第三方库回调时，才需要显式调用

$apply

。

---

将基于回调的API转换为基于AngularJS Promise的API 通过创建服务，可以将基于回调的API集成到AngularJS框架中：

app.service("storageAPI", function($q) {
    this.get = function(url) {
        var deferred = $q.defer();
        storage.get(url, (err, data) => {
            if (err) { 
                deferred.reject(err);
            } else {
                deferred.resolve(data);
            };
        });
        return deferred.promise;
    };
});

用法：

app.controller('portalViewController', function($scope, storageAPI) {
    storageAPI.get('portal_url')
      .then(function(data) {
         $scope.url = data.url;
    }).catch(function(err) {
         console.log(err);
    });
});

这种方法的优点是，它将API集成到AngularJS框架中，而不需要

$apply

（$q服务会自动完成这项工作）。此外，它还能够稳健地处理来自API的错误

有关详细信息，请参阅

---

-.

如果回调确实来自AngularJS执行上下文之外的第三方源，只需使用

$apply

：

portal.controller('portalViewController', function($scope) {
    storage.get('portal_url', (err, data) => {
        $scope.$apply(function() {
            $scope.url = data.url;
        });
    });
});

从文档中：

AngularJS通过提供自己的事件处理循环来修改正常的JavaScript流。这将JavaScript分为经典和AngularJS执行上下文。只有在AngularJS执行上下文中应用的操作才会受益于AngularJS数据绑定、异常处理、属性监视等。。。您还可以使用

$apply（）

从JavaScript输入AngularJS执行上下文

请记住，在大多数地方（控制器、服务）

$apply

已由处理事件的指令为您调用。只有在实现自定义事件回调或使用第三方库回调时，才需要显式调用

$apply

。

---

将基于回调的API转换为基于AngularJS Promise的API 通过创建服务，可以将基于回调的API集成到AngularJS框架中：

app.service("storageAPI", function($q) {
    this.get = function(url) {
        var deferred = $q.defer();
        storage.get(url, (err, data) => {
            if (err) { 
                deferred.reject(err);
            } else {
                deferred.resolve(data);
            };
        });
        return deferred.promise;
    };
});

用法：

app.controller('portalViewController', function($scope, storageAPI) {
    storageAPI.get('portal_url')
      .then(function(data) {
         $scope.url = data.url;
    }).catch(function(err) {
         console.log(err);
    });
});

这种方法的优点是，它将API集成到AngularJS框架中，而不需要

$apply

（$q服务会自动完成这项工作）。此外，它还能够稳健地处理来自API的错误

有关详细信息，请参阅

---

-.get可能不会触发摘要循环，并且您的

$scope

变量没有被反映出来。您可以尝试使用

$scope.$apply（）

进行确认，但不应将其用作解决方案。

storage.get

可能不会触发摘要循环，并且不会反映您的

$scope

变量。可以尝试使用

$scope.$apply（）

进行确认，但不应将其用作解决方案。