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

How to populate Angularjs $scope variable in javascript?

本文关键字：Angularjs scope 变量 填充 javascript      更新时间：2024-03-13
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 数据。

从外部元素访问范围：

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

从外部元素访问和应用作用域：

.JS：

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

除了其他多件事。在这里，原型继承启动，它确实覆盖了$scope对象上的namePlaceholder属性，因为您的<form ...>确实会创建一个从控制器继承的新$scope。因此，您应该始终"使用点"。

例如

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

然后

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

另一件事是，您在操作角度之外的角度变量时"离开"了角度词，因此必须调用angular.element(document.getElementById("foo")).scope().$apply(...)从您自己的 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>

Angular 内部的 DOM 操作应该始终来自指令 - 这允许代码的干净分离。在您的情况下，您永远不会更改该输入的 value 属性，您将修改ng-model以便更改将反映在 $scope 变量中。

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

ng-click="changeValue()"
//In controller
$scope.changeValue = function() {
    $scope.name = "ascd...";
}
相关文章：