Question

如何根据另一个非JS Angular文件中的全局变量更新我的Angular $ scope变量？我使用jQuery插件来生成一些值。我想将此值连接到我的控制器中的$ scope变量。但是，这个值不断变化，我不认为我的$ scope变量会自动更新，并且会更改非Angular变量。这样做的好方法是什么？谢谢！

Answer 1

您可以通过将全局变量包装在函数中来使用$watch。在控制器的link功能中，添加：

$scope.$watch(
    function() {
        return globalVar;
    },
    function(newValue, oldValue) {
        // Global var changed! Do stuff.
        $scope.scopeVar = newValue;
    });

AngularJS继续轮询或检查第一个函数的返回值，该函数返回全局变量。每个摘要周期都会多次执行此操作。

当值更改时，它会调用第二个函数，该函数是更改的事件处理程序。您可以在此处添加用于处理更改的逻辑。为方便起见，更改处理程序将同时传入旧值和新值。

在这种情况下，我只是使用更改的全局值设置范围变量。

Answer 2

如果全局变量在angujarjs之外更新，那么一个可能的解决方案是@metacubed提出的但是它有一个问题，即如果没有其他操作执行的摘要周期，变量将不会更新...... { {3}}

所以我可以提出的另一个解决方案是使用基于区间的方法（由于摘要周期的不断执行，这可能是昂贵的），如

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope, $interval) {
  $scope.mycounter = counter;

  $interval(function() {
    $scope.mycounter = counter;
  }, 1000);

  $scope.something = function() {}
})

var counter = 0;
setInterval(function() {
  counter++;
}, 500);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
  {{mycounter}}
  <button ng-click="something()">Do something</button>
</div>

Answer 3

间隔解决方案似乎有效，但正如@ Arun-p-johny所说，可能会有很多性能成本，

我建议另一种方法，解决方法：＆＃39;仅在变量发生变化时调用范围的挖掘周期＆＃39;

jsfiddle

var updateDigest = function(){
    var appElement = document.querySelector('[ng-app=my-app]');
    var appScope = angular.element(appElement).scope();
    var controllerScope = appScope.$$childHead;
    controllerScope.$digest();
};

var counter = 0;
setInterval(function () {
    counter++;
    updateDigest();
}, 500);

请参阅此answer

这是假设第一个孩子是你正在使用的范围..（在你的应用程序中可能不是这种情况），所以也许可以通过使用rootscope（eg. jsfiddle）进行发射或设置罗根的一个变量。

或者我推荐的更优雅的解决方案..将外部库带到角度上下文（创建包装器），对我来说似乎是更好的解决方案。

＆＃13;

var app = angular.module('my-app', [], function() {})

app.controller('AppController', function($scope, $rootScope) {
  $scope.mycounter = counter;

  $rootScope.$on('updateOuter', function(e, d) {
    console.log('d', d);
    $scope.mycounter = d;
    $scope.$apply();
  });

  $scope.something = function() {}
});

var updateDigest = function(param) {
  var appElement = document.querySelector('[ng-app=my-app]');
  var appScope = angular.element(appElement).scope();
  var rootScope = appScope;
  rootScope.$emit('updateOuter', param);
};

var counter = 0;
setInterval(function() {
  counter++;
  updateDigest(counter);
}, 500);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>

<body ng-app="my-app">
  <div id="container" ng-controller="AppController">
    {{mycounter}}
  </div>
</body>

＆＃13;

如何根据另一个非Angular JS文件中的全局变量更新我的Angular $ scope变量

3 个答案: