Question

我一直试图用REST API制作带有轮询数据（每秒）的cubism.js图。

似乎将正确的值传递给指令，但它不会传递给匿名回调函数。

如果我理解正确，指令中的匿名回调函数应该可以访问参数变量＆＃39; val＆＃39;。

在视图中更新正确的值，以及指令的其余部分。但是，现在似乎参数值＆＃39; val＆＃39;，当promise解析为回调函数＆＃39; notifyCall（data）＆＃39;时，它是从控制器更新的。在指令的匿名回调函数中更新。

我试过的方法

随机放置＆＃39;函数在控制器中的notifyCallback函数内部。 - ＆GT;没有工作
包装$ scope。$ apply on scope.sysHeapMemoryPercent - ＆GT; $ digest error
在指令中使用scope.watch而不是attrs。$ observe - ＆GT;与attrs有相同的结果。$ observe方法

我该如何解决这个问题？我需要使用闭包吗？

控制器

'use strict';
angular.module('adminControllers')
.controller('pollerController', ['$scope', '$resource', 'poller', function ($scope, $resource, poller) {

  $scope.sysHeapMemoryPercent=0;

  // ......
  // Some codes that makes polling API calls every second
  // using $resource and Angular Poller
  // ......

  myPoller.promise.then({}, {}, notifyCallback); 

  function notifyCallback(data){
    $scope.sysHeapMemoryPercent = Number(data[0].value.used) / Number(data[0].value.max);
    }
}]);

指令

'use strict';
angular.module('adminControllers')
 .directive('sysHeapMemoryDirective', function ($timeout) {

 return {
 restrict: 'AE',
 link: function (scope, element, attrs) {
    var context = cubism.context().serverDelay(0).clientDelay(0).step(1000).size(594);


  attrs.$observe('memory', function (newVal,oldVal) {
    console.log(oldVal); // prints undefined every second
    console.log(newVal); // prints the correct value every second

    var constantNum = 0.123;
    compute(constNum); // works
    compute(newVal); // Doesn't work. Some child values are returned as null
  });


  function compute(val) {
    var value = 0, values = [],
    i = 0, last; 

    console.log(val); // prints the correct value every second

    return context.metric(function (start, stop, step, callback) {
      start = +start, stop = +stop;

      console.log(val); // prints 0 every second

      if (isNaN(last)) last = start;
      while (last < stop) {
        last += step;
        values.push(val);
      }
      callback(null, values = values.slice((start - stop) / step));
    }, "Demo");
  }
}
};
});

HTML

<div ng-controller="pollerController">
 {{sysHeapMemoryPercent}}  // successfully shows the updated value every second
   <sys-heap-memory-directive memory="{{sysHeapMemoryPercent}}"> </sys-heap-memory-directive>
</div>

Answer 1

我不确定我是否允许回答我自己的问题，但我找到了解决方案，因为我正在尝试其他方法来解决问题。

这里的问题是AngularJS＆＃34;脏检查＆＃34;是基于对象，我试图将 $ scope.sysHeapMemoryPercent 保存为基本类型（数字）而不是对象。

此链接帮助我了解AngularJS如何更新场景背后的范围变量。 Auto-updating scope variables in angularjs

当我将回复作为对象包装时，它运行正常！

$scope.sysHeapMemoryPercent={};
// .............
function notifyCallback(data){
  $scope.sysHeapMemoryPercent.value = Number(data[0].value.used) / Number(data[0].value.max);
}

AngularJS范围变量未在指令中的匿名回调函数中更新

1 个答案: