[英]How do I update my Angular $scope variable based off of a global variable in another non Angular JS file
如何根據另一個非JS Angular文件中的全局變量更新Angular $ scope變量？ 我正在使用jQuery插件來生成一些值。 我想將此值連接到控制器中的$ scope變量。 但是，此值一直在變化，我不認為我的$ scope變量會隨着對非Angular變量的更改而自動更新。 有什么好方法嗎？ 謝謝！
您可以通過將$watch包裝在函數中來對全局變量使用$watch 。 在控制器的link功能內，添加以下內容：
$scope.$watch(
function() {
return globalVar;
},
function(newValue, oldValue) {
// Global var changed! Do stuff.
$scope.scopeVar = newValue;
});
AngularJS不斷輪詢或檢查第一個函數的返回值，該函數返回您的全局變量。 每個摘要循環執行多次。
值更改時，它將調用第二個函數，該函數是更改的事件處理程序。 您可以在此處添加用於處理更改的邏輯。 為方便起見，更改處理程序以舊值和新值形式傳遞。
在這種情況下，我只是用更改后的全局值設置作用域變量。
如果全局變量是在angujarjs外部更新的，則@metacubed提出了一種可能的解決方案，但是它存在一個問題，即如果沒有其他操作執行的摘要循環，則變量將不會被更新... http：// jsfiddle.net/arunpjohny/Lfz8bo11/2/
所以我可以建議的另一種解決方案是使用基於間隔的方法（由於摘要周期的不斷執行，這可能會很昂貴），例如
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>
間隔解決方案似乎有效，但正如@ Arun-p-johny所說，這可能會帶來很多性能費用，
我建議另一種解決方法：“僅在變量更改時調用示波器的digist循環”
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);
看到這個答案
假設第一個孩子是您正在使用的范圍，這是可行的..（在您的應用程序中不可能如此），所以也許可以通過讓rootscope（ 例如jsfiddle ）在rootscope中進行發射或設置變量來解決。
還是我建議的更好更好的解決方案..對我來說，將外部庫引入角度環境（創建包裝器）似乎是更好的解決方案。
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);
<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>
Angular JS如何在另一個范圍變量內更新范圍變量
[英]Angular JS how to update scope variable inside another scope variable
如何在Angular JS控制器的作用域變量中更新Vanilla JS變量
[英]How to update Vanilla JS variable in scope variable of Angular JS controller
Angular / JS：如何將范圍變量傳遞給javascript函數？
[英]Angular/JS: How do I pass a scope variable to a javascript function?
Angular：如何根據范圍模型的變化更新非Angular JavaScript變量？
[英]Angular: how to update non-angular javascript variable in response to a change of scope model?
使用angular js中的另一個變量獲取$ scope.x1變量
[英]To get the $scope.x1 variable using the another variable in angular js
如何將文本框的內容作為輸入參數而不是 $scope 變量傳遞給 angular js？
[英]How do I pass the contents of a textbox into angular js as an input parameter, rather than a $scope variable?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.