视图未在AngularJS中更新

时间:2014-10-11 13:16:19

标签: javascript android ios angularjs bluetooth-lowenergy

所以我们有这个非常好的项目。蓝牙LE,通过调用本机代码通知javascript然后有角度....

现在我们陷入了困境。

数据绑定一开始看起来非常好,但在使用它之后,它变得越来越糟。

所以这是代码:

controllers.controller('DashboardCtrl', function($scope) {
    $scope.as = Demo.results[GATT.Dashboard.as];
    $scope.ac = Demo.results[GATT.Dashboard.ac];
    $scope.av = Demo.results[GATT.Dashboard.av];
    $scope.ps = Demo.results[GATT.Dashboard.ps];
    $scope.cs = Demo.results[GATT.Dashboard.cs];
    $scope.ts = Demo.results[GATT.Dashboard.ts];
    $scope.dd = Demo.results[GATT.Dashboard.dd];
    $scope.rc = Demo.results[GATT.Dashboard.rc];
    $scope.tps = Demo.results[GATT.Dashboard.tps];
    $scope.ls = Demo.results[GATT.Dashboard.ls];
    $scope.bm = Demo.results[GATT.Dashboard.bm];    
});

Demo.results对象保存来自我们蓝牙设备的推送值。

我们现在必须“简单地”在视图中显示它。

上面的例子是左边的代码,因为$ apply会给$ digestion周期带来错误。

$ watch正在运行,但似乎无法在视图中显示更改的值。

所以,我可以提醒自己一个变量已经改变,但是我们无法获得在视图中实际显示的值。

是否有人比我们更了解这个系统?因为这应该是angularjs最有价值的事情之一。它刚刚破碎。或者我们打破了它。

1 个答案:

答案 0 :(得分:0)

尝试调用$scope.safeApply()方法。并在此方法中包装视图更新代码。它肯定会更新:

controllers.controller('DashboardCtrl', function($scope) {
    $scope.safeApply($scope.viewUpdate()); // Call this code from the intended function, like an API call back or something where you wish to get your view uodated.

    $scope.safeApply = function(fn) {
      var phase = this.$root.$$phase;
      if(phase == '$apply' || phase == '$digest') {
        if(fn && (typeof(fn) === 'function')) {
         fn();
        }
      } else {
         this.$apply(fn);
      }
   };

   $scope.viewUpdate = function() {

    $scope.as = Demo.results[GATT.Dashboard.as];
    $scope.ac = Demo.results[GATT.Dashboard.ac];
    $scope.av = Demo.results[GATT.Dashboard.av];
    $scope.ps = Demo.results[GATT.Dashboard.ps];
    $scope.cs = Demo.results[GATT.Dashboard.cs];
    $scope.ts = Demo.results[GATT.Dashboard.ts];
    $scope.dd = Demo.results[GATT.Dashboard.dd];
    $scope.rc = Demo.results[GATT.Dashboard.rc];
    $scope.tps = Demo.results[GATT.Dashboard.tps];
    $scope.ls = Demo.results[GATT.Dashboard.ls];
    $scope.bm = Demo.results[GATT.Dashboard.bm];

   }
});

参考: https://coderwall.com/p/ngisma/safe-apply-in-angular-js