如何在javascript中填充Angularjs $ scope變量？

Question

mapApp.controller("myController", function ($scope,$http) {
            $scope.namePlaceHolder= "Name";
            $scope.name = "";
};

我將范圍變量綁定到html輸入，如下所示。

<input id="foo" type="text" placeholder="{{namePlaceHolder}}" ng-model="name" value="{{name}}"/>

如果用戶在文本框中鍵入內容，則$ scope.name屬性會更改。 但是當我使用javascript更改它時，$ scope.name數據不會更改。

on(document.getElementById("button"), "click", function (e) {
        document.getElementById("foo").value = "ascd...";
})

此代碼不會填充$ scope.name數據。

Answer 1

從外部元素訪問范圍：

on(document.getElementById("button"), "click", function (e) {
            var scope = angular.element(document.getElementById("foo")).scope();
            scope.name = "hello, World!";
    })

Answer 2

從外部元素訪問和應用范圍：

JS：

 on(document.getElementById("button"), "click", function (e) { var scope = angular.element(document.getElementById("foo")).scope(); scope.name = "hello, World!"; scope.$apply(); }) 

Answer 3

除了多個其他的東西。 這里的Prototypal Inheritance啟動，它會覆蓋$scope對象上的namePlaceholder屬性，因為你的<form ...>確實創建了一個從你的控制器繼承的新$scope 。 因此，您應該始終“ 使用點 ”。

例如

$scope.placeHolders = {
    name: "something"
};

然后

<input placeholder="{{placeholders.name}}">

另一件事是你在角度之外操縱角度變量時“離開”角度詞，因此必須調用angular.element(document.getElementById("foo")).scope().$apply(...) to從你自己的JS中“回歸”角度世界。

但更好的解決方案

mapApp.controller("myController", function ($scope,$http) {
    $scope.placeHolders = {
        name: 'Name'
    };
    $scope.selected = {
        name: ''
    };
    $scope.click = function() {
       $scope.selected.name = "something ...";
    };
};

<input ng-model="selected.name" placeholder="{{ placeHolders.name }}" ...>
<button ng-click="click()"></button>

Answer 4

Angular中的DOM操作應始終來自指令 - 這樣可以實現代碼的清晰分離。 在您的情況下，您永遠不會更改該輸入的value屬性，您將修改ng-model以便更改將反映在$scope變量中。

因此，在上面的ID button元素中，使用ng-click

ng-click="changeValue()"

//In controller
$scope.changeValue = function() {
    $scope.name = "ascd...";
}