current community

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite 
mapApp.controller("myController", function ($scope,$http) {
            $scope.namePlaceHolder= "Name";
            $scope.name = "";
};

I bound a scope variable to an html input as follows.

<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.

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

This code does not populate $scope.name data.

share|improve this question
 
You don't manipulate html directly in AngularJS. Why do you want to do this. –  Chandermani Dec 4 '13 at 14:26
 
did you mean getElementById("foo")? –  Vincent Ramdhanie Dec 4 '13 at 14:26
 
getElementById("foo") edited –  bookmarker Dec 4 '13 at 14:35
 
@Chandermani, sometimes I change "foo" input element in javascript code. So in this stuation, changed data should populate in $scope –  bookmarker Dec 4 '13 at 14:37
1  
Try to manipulate the model within the angular world unless you have special requirement ( 3rd party JS lib integration). Here is a jsFiddle demo for accessing angular world member from javascript –  Chickenrice Dec 4 '13 at 15:16
show 1 more comment

3 Answers

up vote 1 down vote accepted

Accesing scope from external element:

on(document.getElementById("button"), "click", function (e) {
            var scope = angular.element(document.getElementById("foo")).scope();
            scope.name = "hello, World!";
    })
share|improve this answer
add comment
up vote 2 down vote

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 value attribute of that input, you would modify the ng-model so the changes will be reflected in your $scope variable.

So, in your above element of ID button, use an ng-click

ng-click="changeValue()"

//In controller
$scope.changeValue = function() {
    $scope.name = "ascd...";
}
share|improve this answer
add comment
up vote 2 down vote

Beside multiple other things. Here Prototypal Inheritance kicks in, which does overwrite your namePlaceholder property on the $scope object sind your <form ...> does create a new $scope which inherits from your controller. Therefore you should always "use a dot".

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.

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>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.