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-18T06:05:34.407

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);

score 0 · Answer 2 · answered Feb 18 '16 at 03:11

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 '16 at 03:11

Wang Dan

63
8

Programmatically changed value not detected by AngularJS

2 Answers2