Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 2 down vote favorite
1

I have this simple scenario:
- input element which value is changed by jQuery's val() method

I am trying to update the angular model with the value that jQuery set. I tried to write a simple directive, but it's not doing what I want.

Here's the directive:

var myApp = angular.module('myApp', []);
myApp.directive('testChange', function() {
    return function(scope, element, attrs) {        
        element.bind('change', function() {
            console.log('value changed');
        })
    }
})

this is the jQuery part: 

$(function(){
    $('button').click(function(){
        $('input').val('xxx');
    })
})

and html:

<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <input test-change ng-model="foo" />
        <span>{{foo}}</span>
    </div>
</div>

clickme

Here is the fiddle with my try:
http://jsfiddle.net/U3pVM/743/

Can someone please point me in the right direction? Thanks.

share|improve this question
2  
Mix AngularJS and jQuery, outside the directives, is often a bad idea. Is jQuery mandatory for what you want to do ? – Blackhole Jun 14 at 13:49
Why don't you set the click event with angular to a function in the controller to change the value of the model? – Jimmy Kane Jun 14 at 13:56
@Blackhole, I am using jquery upload plugin that do its work and puts the path to uploaded file into the hidden input. All I need is to have access to that path in angular model. So I thought I'll set it as a value of hidden input and after it is changed update the angular model. – Michal J. Jun 14 at 14:00
I do not see Jquery call in your fiddle... Can you check and point where you change value with JQ? – Valentyn Shybanov Jun 14 at 14:06
Your fiddle links to a Todo sample app, which doesn't relate to this question. – Stewie Jun 14 at 14:12
show 2 more comments

2 Answers

up vote 9 down vote accepted

ngModel listens for "input" event, so to "fix" your code you'd need to trigger that event after setting the value:

$('button').click(function(){
    var input = $('input');
    input.val('xxx');
    input.trigger('input');
});

For the explanation of this particular behaviour checkout this answer that I gave a while ago: "How does AngularJS internally catch events like 'onclick', 'onchange'?"

But unfortunately, this is not the only problem you have. As pointed out with other post comments, your jQuery-centric approach is plain wrong. For more info take a look at this post: How do I “think in AngularJS” if I have a jQuery background?).

share|improve this answer
thank you Stewie, I read the articles you suggested and will have to review my approach how to use angular. – Michal J. Jun 14 at 15:03
up vote 4 down vote

I don't think jQuery is required here.

You can use $watch and ng-click instead

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <input test-change ng-model="foo" />
    <span>{{foo}}</span>

    <button ng-click=" foo= 'xxx' ">click me</button>
    <!-- this changes foo value, you can also call a function from your controller -->
  </div>
</div>

In your controller : 

$scope.$watch('foo', function(newValue, oldValue) {
  console.log(newValue);
  console.log(oldValue);
});
share|improve this answer
Thank you Utopik, you're right, I shouldn't mix jquery with angular when there is a way how to do the job using angular. – Michal J. Jun 14 at 15:06

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.