但更好的解决方案

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：

＆＃13;

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

＆＃13;

Answer 3

除了其他多项内容。这里Prototypal Inheritance启动，会覆盖namePlaceholder对象上的$scope属性，因为您的<form ...>确实创建了一个从您的控制器继承的新$scope。因此，您应始终“use a dot”。

E.g。

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

然后

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

另一件事是你在操纵角度变量以外的角度时“离开”角度词，因此必须从你自己的JS中调用angular.element(document.getElementById("foo")).scope().$apply(...)来“回到”角度世界。

但更好的解决方案

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...";
}

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

4 个答案:

但更好的解决方案