2

I'm using AngularJS and jQuery for a project. When i typing input, ng-change is working.. But, when i using jquery input.val('blabla') ng-change is not working.. How can i report this change angularjs side? This is my code.. Apply or watch or other one?

 // Html
    <input type="text" name="city" class="city-input req-string" rel="cityCtr" value="" ng-model="city" ng-change="findWeather(city)">

    // jQuery code
    $('.city-input').val('İstanbul');

     // All AngularJS code
    var app = angular.module('weatherApp', []);

app.controller('weatherCtrl', ['$scope', 'weatherService', function($scope, weatherService) {

    function fetchWeather(city) {
        weatherService.getWeather(city).then(function(data){
            $scope.items = data;
        });
    }

    $scope.findWeather = function(city) {
        $scope.items = '';
        fetchWeather(city);
        alert(city);
    };

}]);

app.factory('weatherService', ['$http', '$q', function ($http, $q){
    function getWeather (city) {
        var deferred = $q.defer();
        var query = 'select * from weather.forecast where woeid in (select woeid from geo.places(1) where text="'+city+'")',
            url   = "http://query.yahooapis.com/v1/public/yql?q=" + query + "&format=json&callback=";
        $http.get(url)
            .success(function(data){
                deferred.resolve(data.query.results.channel.item.forecast);
                console.log(data)
            })
            .error(function(err){
                console.log('Error retrieving markets');
                deferred.reject(err);
            });
        return deferred.promise;
    }

    return {
        getWeather: getWeather
    };
}]);
John Slegers
  • 45,213
  • 22
  • 199
  • 169
kenanyildiz90
  • 176
  • 3
  • 13
  • did you check for any error message in browser console? – Sunny Sharma Feb 07 '15 at 10:26
  • You probably just need to force a digest cycle with $scope.$apply or $timeout. – Shomz Feb 07 '15 at 10:34
  • Where should i use $scope.$apply or timeout? in findWeather function? – kenanyildiz90 Feb 07 '15 at 10:39
  • possible duplicate of [AngularJS ng-model binding not updating with dynamic values](http://stackoverflow.com/questions/11873627/angularjs-ng-model-binding-not-updating-with-dynamic-values) – Sunny Sharma Feb 07 '15 at 10:45
  • another Possible duplicate: http://stackoverflow.com/questions/22612650/ng-model-is-not-updating-when-using-jquery-element-val – Sunny Sharma Feb 07 '15 at 10:46
  • thank you, i dont use directives. I think its self problem. My jQuery code is outside angularjs code. I will try your proposal. I think, i can't report the angularjs code a from outside script code(jquery, javascript etc.) ?? – kenanyildiz90 Feb 07 '15 at 10:56
  • I'm using custom dropdown writed by jQuery. And i think, i can not use $scope.city=istanbul in my jQuery custom dd script. Really, all problem is this. – kenanyildiz90 Feb 07 '15 at 11:11
  • i mean share a bit of the code where you call $('.city-input').val('İstanbul'); otherwise how can we help you to pack it in a directive and call $scope.$apply at the right place – micha Feb 07 '15 at 11:32
  • dd.js 213. line input.val(), you can look this link. http://plnkr.co/edit/NKH14GAjW8D1aTvBGLjm?p=preview – kenanyildiz90 Feb 07 '15 at 12:26
  • Off topic: Constructing the query in js seems like a bad idea. Sql injection... – yeouuu Nov 09 '15 at 15:10

1 Answers1

2

Just use:

$('.city-input').val('İstanbul').trigger('input');

Instead of:

$('.city-input').val('İstanbul');
Wekerle Tibor
  • 457
  • 2
  • 7
  • 19