Get element in Angular view using jQuery

Question

I'm relatively new to Angular, and suspect I am not grasping a concept.

What I want to do: Load main view. Click a button on main view which loads a different view. Use jQuery (or any other method) to return an input field in that new view, so I can change the text of the input.

Angular view, which loads after I click a button in the main view:

<input type="text" id="contact_name" ng-model="contact_name"></input>

Function that is supposed to change the text of the input field

function loadInputs(){
    $('#contact_name').val('test'));
}

What I tried so far, both of these are being called from the controller:

$scope.$on('$routeChangeSuccess', function () {
  loadInputs();
});

and

$scope.$on('$viewContentLoaded', tempContact.loadInputs());

Neither of which worked. What is the "angular way" of doing this?

The angular is not to use jquery selectors and just use the mvvm pattern. $scope.contact_nam='test' — Jayantha Lal Sirisena
– Jayantha Lal Sirisena, Commented Dec 23, 2013 at 6:46
Read How do I “think in AngularJS” if I have a jQuery background?. — Stewie
– Stewie, Commented Dec 23, 2013 at 9:30

Hearaman · Accepted Answer · 2013-12-23 07:01:29Z

1

I suggest you that do not implement this with jQuery. Just modify your code slightly.

       $scope.loadInputs=function()
       {
             $scope.contact_name='test';
       };

answered Dec 23, 2013 at 7:01

Hearaman

8,78813 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kahtaf Alam Over a year ago

Worked like a charm. Can't believe it was this simple. Thanks!

Collectives™ on Stack Overflow

Get element in Angular view using jQuery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related