Programmatically changed value not detected by AngularJS

Question

This is only my 2nd AngularJS project. I'm trying to add new functionality to an existing jQuery app rather than starting over.

The jQuery portion populates a div with several image thumbnails. The purpose of the new AngularJS features is to allow the user to edit the information for the photos - caption, photographer credit, and such. Clicking a thumbnail should trigger the Angular app to retrieve its info from the database for edit. My problem is, the image URL is never picked up by Angular.

The ng-app tag is placed on the page's body element, so everything should be visible to Angular. I have tried $scope.$watch and $scope.$apply with no success. The URL of the clicked image does appear in expected locations, but the Angular model element "imgurl" never seems to get updated despite using ng-model="imgurl" on the text input field.

I have looked at similar questions such as these:

My existing jQuery, trying to push data into Angular

function populateImageForm(imageURL) {
    jQuery("#imageurltest").html("clicked image is " + imageURL); //show the URL of the clicked image
    //updates the image, but Angular doesn't see change: jQuery("#working-image").attr("src", imageURL);
    jQuery("#working-image").attr("ng-src", imageURL);
    jQuery("#wiurl").val(imageURL);
    }

HTML elements using Angular:

<img id="working-image" class="center-block img-responsive" ng-src={{imgurl}} imageonload />
<input id="wiurl" type="text" size="65" ng-model="imgurl"  />

Angular controller code:

app.controller("imageInfoControl", function($scope, $http) {
    $scope.imgurl = "http://example.org/placeholder.jpg";

    $http.get("ng-get-image.php", {params:{"url": $scope.imgurl}} ).success(function(response){
        console.log (response);
        $scope.message = response.title;
        });

    $scope.$watch('imgurl', 
        function(newVal, oldVal) {
      console.log('imgurl programmatically changed');
    });

$scope.$watch(function() {
      return $scope.message
    }, function(newVal, oldVal) {
      if(newVal !== null) {
        console.log('message programmatically changed to ' + $scope.message);
      }
    });

    }); 


app.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                console.log (element);
                console.log (attrs);
                //doesn't seem to do anything: scope.$apply(attrs.imageonload); https://stackoverflow.com/questions/17884399/image-loaded-event-in-for-ng-src-in-angularjs
                scope.$digest;
                scope.message = attrs.src;
                console.log(scope.message);
                //alert('image is loaded');
            });
            element.bind('error', function(){
                alert('image could not be loaded');
            });
        }
    };
});

Suresh B · Accepted Answer · 2016-02-18 06:05:34Z

1

Sample Link

Make it as separate js file and call it in index under angular and jquery script

(function($, ng) {
    var $val = $.fn.val; // save original jQuery function
   // override jQuery function
  $.fn.val = function (value) {
    // if getter, just return original
    if (!arguments.length) {
      return $val.call(this);
    }
     // get result of original function
    var result = $val.call(this, value);
     // trigger angular input (this[0] is the DOM object)
    ng.element(this[0]).triggerHandler('input');
     // return the original result
    return result; 
  }
})(window.jQuery, window.angular);

edited Feb 18, 2016 at 6:05

answered Feb 18, 2016 at 5:49

Suresh B

1,6521 gold badge18 silver badges35 bronze badges

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

Comments

Wang Dan · Accepted Answer · 2016-02-18 03:11:25Z

0

You need to use model as a property of an object. Please try ng-model="data.imgurl". Of course, you need to declare data object in the scope.

$scope.data = {}: $scope.data.imgurl = "something.jpg"; Like this

Thank you

answered Feb 18, 2016 at 3:11

Wang Dan

638 bronze badges

Collectives™ on Stack Overflow

Programmatically changed value not detected by AngularJS

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related