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

Związuję zmienną zakresu do wejścia HTML w następujący sposób.

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

Jeśli typy użytkowników coś w polu tekstowym Zmiany właściwości $ scope.name. Ale kiedy zmienam go za pomocą JavaScript $ Sistand.name Data się nie zmieni.

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

Ten kod nie wypełnia danych $.name Data.

5
barteloma 4 grudzień 2013, 18:24

4 odpowiedzi

Najlepsza odpowiedź

Dostęp do zakresu z elementu zewnętrznego:

on(document.getElementById("button"), "click", function (e) {
            var scope = angular.element(document.getElementById("foo")).scope();
            scope.name = "hello, World!";
    })
11
MeLight 4 grudzień 2013, 14:41

Dostęp i zastosowanie zakresu z elementu zewnętrznego:

JS:

on(document.getElementById("button"), "click", function (e) {
            var scope = angular.element(document.getElementById("foo")).scope();
            scope.name = "hello, World!";
            scope.$apply();
    })
6
Parth Patel 15 marzec 2016, 07:36

Obok wielu innych rzeczy. Tutaj Prototypal dziedziczenie kopie, co nadpisuje właściwość namePlaceholder na {{x1 }} Obiekt, ponieważ <form ...> tworzy nowy $scope, który dziedziczy z kontrolera. Dlatego powinieneś zawsze "Użyj kropki".

Na przykład.

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

I wtedy

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

Inną rzeczą jest to, że "pozostawiłeś" kątowe słowo przy manipulowaniu zmiennej kątowej poza kątową, a zatem musi zadzwonić angular.element(document.getElementById("foo")).scope().$apply(...), aby "wrócić" w kątowym świecie z własnego JS.

Ale lepsze rozwiązanie

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>
4
fdomig 19 wrzesień 2014, 07:54

Dom Manipulacje z wewnątrz kątowego powinny zawsze pochodzić z dyrektyw - Pozwala to na czysty rozdzielanie kodu. W twoim przypadku nigdy nie zmieniłbyś atrybutu value tego wejścia, zmodyfikowałbyś ng-model, więc zmiany zostaną odzwierciedlone w zmiennej $scope.

Więc w powyższym elemencie ID button, użyj ng-click

ng-click="changeValue()"

//In controller
$scope.changeValue = function() {
    $scope.name = "ascd...";
}
3
tymeJV 4 grudzień 2013, 14:38