Comment faire pour remplir Angularjs $portée variable en javascript?

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

Que j'ai lié une portée variable html entrée comme suit.

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

Si un utilisateur tape quelque chose dans la zone de texte $champ d'application.nom des modifications de la propriété. Mais quand je le changer à l'aide de javascript $champ d'application.les données de nom ne change pas.

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

Ce code ne remplit pas les $champ d'application.les données de nom.

Vous n'avez pas manipuler du code html directement dans AngularJS. Pourquoi voulez-vous faire cela.
vouliez-vous dire getElementById("foo")?
getElementById("foo") édité
parfois je change "foo" l'élément d'entrée dans le code javascript. Donc, dans cette stuation, les données modifiées doivent remplir dans $portée
Essayer de manipuler le modèle à l'intérieur de l'angle de monde, sauf si vous avez une exigence particulière ( 3e partie JS lib de l'intégration). Voici un jsFiddle démo pour accéder angulaire monde membre de javascript

OriginalL'auteur barteloma | 2013-12-04

  1. 11

    Accès aux portée de l'élément extérieur:

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

    OriginalL'auteur MeLight

  2. 4

    À côté de plusieurs autres choses. Ici Prototypes Héritage coups de pied dans, qui ne remplacer votre namePlaceholder bien sur la $scope objet depuis votre <form ...> permet de créer un nouveau $scope qui hérite de votre contrôleur. Par conséquent, vous devriez toujours "utiliser un point".

    E. g.

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

    et puis

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

    Une autre chose est que vous "gauche" l'angle de parole lors de la manipulation angulaire variable en dehors de l'angulaire et donc appel angular.element(document.getElementById("foo")).scope().$apply(...) de "remonter" dans l'angle de monde à partir de votre propre JS.

    Mais la meilleure 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>

    OriginalL'auteur fdomig

  3. 3

    DOM manipulations de l'intérieur Angulaire doit toujours venir de directives, ce qui permet de nettoyer la séparation de code. Dans votre cas, vous ne changez jamais la value attribut de l'entrée, vous serait de modifier la ng-model de sorte que les modifications seront prises en compte dans votre $scope variable.

    Donc, dans votre élément d'ID button, utiliser un ng-click

    ng-click="changeValue()"

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

    OriginalL'auteur tymeJV