如何在 javascript 中填充 Angularjs $scope 变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20377875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to populate Angularjs $scope variable in javascript?
提问by barteloma
mapApp.controller("myController", function ($scope,$http) {
$scope.namePlaceHolder= "Name";
$scope.name = "";
};
I bound a scope variable to an html input as follows.
我将范围变量绑定到 html 输入，如下所示。
<input id="foo" type="text" placeholder="{{namePlaceHolder}}" ng-model="name" value="{{name}}"/>
If a user types something in text box the $scope.name property changes. But when I change it using javascript the $scope.name data doesn't change.
如果用户在文本框中键入内容，则 $scope.name 属性会更改。但是当我使用 javascript 更改它时， $scope.name 数据不会改变。
on(document.getElementById("button"), "click", function (e) {
document.getElementById("foo").value = "ascd...";
})
This code does not populate $scope.name data.
此代码不会填充 $scope.name 数据。
回答by MeLight
Accesing scope from external element:
从外部元素访问范围：
on(document.getElementById("button"), "click", function (e) {
var scope = angular.element(document.getElementById("foo")).scope();
scope.name = "hello, World!";
})
回答by Parth Patel
Accessing and apply scope from external element:
从外部元素访问和应用范围：
JS:
JS：
on(document.getElementById("button"), "click", function (e) {
var scope = angular.element(document.getElementById("foo")).scope();
scope.name = "hello, World!";
scope.$apply();
})回答by fdomig
Beside multiple other things. Here Prototypal Inheritancekicks in, which does overwrite your namePlaceholderproperty on the $scopeobject since your <form ...>does create a new $scopewhich inherits from your controller. Therefore you should always "use a dot".
除了其他很多东西。这里原型继承开始了，它确实覆盖namePlaceholder了$scope对象上的属性，因为您<form ...>确实创建了一个$scope从控制器继承的新属性。因此，您应该始终“使用点”。
E.g.
例如
$scope.placeHolders = {
name: "something"
};
and then
接着
<input placeholder="{{placeholders.name}}">
Another thing is that you "left" the angular word when manipulating an angular variable outside of angular and therefore have to call angular.element(document.getElementById("foo")).scope().$apply(...)to "get back" in the angular world from your own JS.
另一件事是，在 angular 之外操作角度变量时，您“离开”了角度词，因此必须angular.element(document.getElementById("foo")).scope().$apply(...)从您自己的 JS 中调用“返回”角度世界。
But the better solution
但更好的解决方案
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>
回答by tymeJV
DOM manipulations from within Angular should always come from directives- this allows for clean separation of code. In your case, you would never change the valueattribute of that input, you would modify the ng-modelso the changes will be reflected in your $scopevariable.
来自 Angular 的 DOM 操作应该总是来自指令——这允许代码的清晰分离。在您的情况下，您永远不会更改该value输入的属性，您将修改ng-model以便更改将反映在您的$scope变量中。
So, in your above element of ID button, use an ng-click
因此，在上面的 ID 元素中button，使用ng-click
ng-click="changeValue()"
//In controller
$scope.changeValue = function() {
$scope.name = "ascd...";
}
