在 AngularJS 中监视外部变量

Question

我已经为Chrome应用程序中的串行通信编写了一个小型JS库，它本身工作正常。但是，我们在与 Angular 集成时遇到了一个问题：我没有办法从内部观察控制器外部串行对象的属性，并且我无法找到解决方法。理想情况下，有一个解决方案在计算上不会太昂贵，但是在这一点上，我不排除将整个库转换为更 Angular 友好的格式的方法。但是，在这种情况下，我不确定它应该以服务还是其他格式使用。任何帮助将不胜感激。

Answer 1

只是从这里借用了这个想法：在 AngularJS 中，如何在 URL 哈希上添加$watch？

$scope.$watch 接受函数作为第一个参数，因此您可以这样做：

$scope.$watch(function () {
    return mylib.myproperty
}, function (value) {
    // do stuff
});

更新：如注释中所述，当 mylib.myproperty 更改时，控制器直到下一个摘要 cicle 才会知道它。由于 mylib 没有启用角度，因此您需要使用简单的 JavaScript 回调机制：

mylib.on_myproperty_change(function(){
    $scope.$digest(); // this will cause the $watch to be re-evaluated
});

但是由于现在您已经有了mylib.on_myproperty_change，因此您实际上不需要$watch任何东西，因此您可以删除手表，只需

mylib.on_myproperty_change(function(){
    //do the stuff that you did in the the $watch
    $scope.$digest(); 
});

Answer 2

创建自己的自定义库作为 Angular 服务：

myAngularApp.service('MyCustomLib', function(){
    return myCustomLibInstance;
    }]
);

然后，您可以将其传递到控制器并将其保存到本地范围：

function MyCtrl($scope,MyCustomLib) {
  var myCustomLib = MyCustomLib;

现在，您可以从控制器内部访问自定义库，并且可以设置手表，正如@tony在他的回答中所建议的那样：

$scope.$watch(
function () { 
  return myCustomLib.property 
}, 
function (newValue, oldValue) { 
 // do stuff 
});

Answer 3

我用来启动摘要周期的方法是$timeout(function () {})。

如果已经有一个现有的摘要周期正在运行，$scope.$digest()将引发错误。

我有它作为

// From my controller
externalService.setOnChangeCallback(function () { $timeout(function () {}) });
// in my service
// on change event
this.onChangeCallBack();

$scope.$watch没有可靠地为我奔跑。有时重新评估监视的值，有时不重新评估。