Question

这只是我的第二个AngularJS项目。我正在尝试向现有的jQuery应用程序添加新功能，而不是重新开始。

jQuery部分使用多个图像缩略图填充div。新AngularJS功能的目的是允许用户编辑照片的信息 - 标题，摄影师信用等。单击缩略图应触发Angular应用程序从数据库中检索其信息以进行编辑。我的问题是，图像URL永远不会被Angular选中。

ng-app标签放在页面的body元素上，因此Angular可以看到所有内容。我已经尝试过$ scope。$ watch和$ scope。$ apply但没有成功。点击图像的URL确实出现在预期的位置，但是尽管在文本输入字段中使用了ng-model =“imgurl”，但Angular模型元素“imgurl”似乎永远不会更新。

我看过类似的问题：

我现有的jQuery，试图将数据推送到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);
    }

使用Angular的HTML元素：

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

角度控制器代码：

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

Answer 1

<强> Sample Link

将其作为单独的js文件，并在angular和jquery脚本

下的索引中调用它

this

Answer 2

您需要将model用作对象的属性。请尝试ng-model =“data.imgurl”。当然，您需要在范围内声明数据对象。

$ scope.data = {}： $ scope.data.imgurl =“something.jpg”; 喜欢这个

谢谢

AngularJS

2 个答案: