CODEWITHSUNDEEP
angularjsangularjs-scope
ReynierPM
ReynierPM

Reputation: 18660

$watch is not listening for changes in element

I have this code in my controller:

app.controller('NewSeller', function($scope, $http, $routeParams, $fileUploader) {

    $scope.section = $routeParams.section == undefined ? 'main' : $routeParams.section;
    $scope.aaaa = 'sdsdsdsd';

    switch ($scope.section) {
        case 'registro':
            {
                $('.seller-menu').animate({left: -230}, 300);
                $scope.section = 'primer-paso';
                break;
            }
        case 'segundo-paso':
            {
                break;
            }
        case 'main':
        default:
            {
                break;
            }
    }

    $scope.logo = null;

    $scope.$watch('common_commonbundle_standard_address.country',
            function(val) {
                $http.get(Routing.generate('states') + val).success(function(data) {
                    if (data.message) {
                        $scope.message = data.message;
                    } else {
                        $scope.states = data;
                    }
                }).error(function(data, status, headers, config) {
                    if (status == '500') {
                        $scope.message = "No hay conexión con el servidor.";
                    }
                });
            });

    $scope.functionAddCompany = function() {
        var company = {
            "name": $('#addName').val(),
            "social": $('#addSocial').val(),
            "rif": $('#addRIF').val(),
            "address": $('#addAddress').val(),
            "phone": $('#addCode').val() + '-' + $('#addNumber').val(),
            "address2": $('#addAddress2').val(),
            "number": $('#addNo').val(),
            "street": $('#addStreet').val(),
            "block": $('#addBlock').val(),
            "state": $('#addState').val(),
            "city": $('#addCity').val(),
            "zone": $('#addZone').val(),
            "ref": $('#addRef').val()
        };

        scope = angular.element($(".seller-layout.new")).scope();
        scope.section = 'segundo-paso';
    };

});

Why, anytime I load the page, this call is made:

GET http://dev.com/app_dev.php/common/get-statesundefined 404 (Not Found)

Should not the $scope.$watchbe listening on select#common_commonbundle_standard_address.countryoption change? What is wrong?

This is the related HTML code:

<select 
       id="common_commonbundle_standard_address_country" 
       ng-model="common_commonbundle_standard_address.country" 
       required="required" 
       tooltip="País" 
       tooltip-trigger="focus" 
       tooltip-placement="right" 
       wv-def="País" 
       wv-cur="" 
       wv-err="Error!" 
       wv-req="The value you selected is not a valid choice" 
       type="text" 
       class="ng-scope ng-pristine ng-invalid ng-invalid-required">
 ...
</select>

Upvotes: 0

Views: 355

Answers (2)

madhured
madhured

Reputation: 443

Here is the plunker , one thing is with out defining the object in the scope the scope will not watch for the property

http://plnkr.co/edit/t3rQ3fHE8iPDOGKqJPMW?p=preview

Upvotes: 0

Joe Minichino
Joe Minichino

Reputation: 2773

If you're watching an object deeply you may want to specify true as the third parameter which checks for object equality, i.e. 

$scope.$watch('common_commonbundle_standard_address', function (newval) {
  // .. do your stuff
}, true);

Secondly, did you put an ng-model="common_commonbundle_standard_address.country in your select?

Thidrly, why are you littering your controller code with jquery stuff when you can bind with ng-model? Not only it's just nonsensical but the events triggered by jquery will be outside of angular's lifecycle so they won't be included in $digest cycles.

Upvotes: 2

Related Questions