如何更改範圍之外的AngularJS數據？

Question

經過幾個小時的沮喪搜索，我覺得我需要在這裏提交我的問題。如果這個問題之前得到了答覆，我很抱歉，但是迄今爲止我的搜索都沒有幫助。所以這是我的問題：

我的JavaScript代碼正在創建一個對象，它由AngularJS修改和監視。在某些事件上（如加載對象的先前設置），我希望從該範圍之外更改此對象的屬性。問題是，投入不會改變......

這裏是我多麼希望執行這些變化的例子：

---

HTML代碼：

<div ng-app="myApp" ng-controller="FirstCtrl"> 
<input type="number" ng-model="data.age"> 
<h1>{{data.age}}</h1> 

<input type="button" value="Change to 20" ng-model="data" onclick="change()"> 

---

JavaScript代碼：

var person = { 
    age: 16 
}; 

// Create module 
var myApp = angular.module('myApp', []); 
myApp.factory('Data', function() { 
    return person; 
}); 

function FirstCtrl($scope, Data) { 
    $scope.data = Data; 
} 

function change() { 
    person.age = 20; 
} 

---

當我現在按下「更改爲20」按鈕時，沒有任何反應。我如何從change函數修改人的年齡？

Answer 1

⚠️警告：這個答案是舊的，沒有反映最佳實踐，並且可能與新版本的Angular不兼容。

MaxPRafferty的答案是正確的 - 在範圍中使用函數通常是更好的方法 - 但還有另一種選擇。您可以使用angular.element(...).scope()方法從不相關的JavaScript訪問Angular範圍。在您單擊處理目標具有指定的ng-app屬性的元素，像選擇應用程序的頂層範圍：

function change() { 
    var appElement = document.querySelector('[ng-app=myApp]'); 
    var $scope = angular.element(appElement).scope(); 
    $scope.$apply(function() { 
     $scope.data.age = 20; 
    }); 
} 

試試吧in this Fiddle。

Shaunjust pointed out Angular將在$digest()調用期間處理任何「手錶」或「綁定」。如果您直接修改$scope的屬性，則更改可能不會立即反映出來，並且可能會出現錯誤。

要觸發此操作，您可以調用$scope.$apply()這將檢查髒範圍並更新正確綁定的任何內容。傳遞一個可以在$scope.$apply中執行工作的函數將允許Angular捕獲任何異常。此行爲在the documentation for Scope中解釋。

Answer 2

http://jsfiddle.net/MaxPRafferty/GS6Qk/

你要設置你的NG-點擊屬性，在你的範圍的功能，如下所示：

var person = { 
    age: 16 
}; 

// Create module 
var myApp = angular.module('myApp', []); 
myApp.factory('Data', function() { 
    return person; 
}); 

function FirstCtrl($scope, Data) { 
    $scope.data = Data; 
    $scope.update = function(){ 
     $scope.data.age = 20; 
    } 
} 

Answer 3

Jeremy's answer好纔是真的好，雖然現在角度發生了變化，不再工作，除非你加入這行代碼：

$scope = $scope.$$childHead; 

因此，變更後的功能應該是這樣的

function change() { 
    var appElement = document.querySelector('[ng-app=myApp]'); 
    var $scope = angular.element(appElement).scope(); 
    $scope = $scope.$$childHead; // add this and it will work 
    $scope.$apply(function() { 
     $scope.data.age = 20; 
    }); 
} 

Answer 4

使用$ render方法時，如果在指令外修改了值，則會由ng-model指令調用。通過閱讀$ viewValue屬性來獲得新值。看：https://jsfiddle.net/cesar_ade/g5ybs6ne/

ctrl.$render=function(){ 
    setSelected(ctrl.$viewValue || 'Not Sure'); 
} 

Answer 5

使用傑里米銀行完美的答案，在一行中完成的，雖然我引用控制器VS應用程序：

angular.element('[ng-controller=myController]').scope().$apply(function(x){ x.foo = "bar"; }); 

Answer 6

只需用很短的$超時

var whatever = 'xyz'; 
$timeout(function(){ 
    $scope.yourModel.yourValue = whatever; 
}, 0); 

你就完成了。

我試過所有這些$應用黑客從周圍的www以前，他們都沒有工作。但是這個$超時工作總是像一個魅力，在任何情況下。 所有你需要的是你的$範圍和$超時的參考。

Wy和它是如何工作：

// Imagine an angular buildin-function 
angular.$queue = function(fn){ 
    $timeout(fn, 0); 
} 

它的工作原理基本上像一個隊列。但請注意，它是異步的。