Javascript 如何用angular中的另一个图像更新div？_Javascript_Html_Css_Angularjs

Javascript 如何用angular中的另一个图像更新div？

javascript html css angularjs

Javascript 如何用angular中的另一个图像更新div？,javascript,html,css,angularjs,Javascript,Html,Css,Angularjs,在我的指令中，我看到的示例使用了，链接：功能（范围、要素、属性）{ if（parseInt（scope.index）==0）{ css（{'background-image'：'url（'+scope.item.url+'））}）； } 元素绑定（'单击'，函数（）{ var src=elem.find（'img'）.attr（'src'）； css（{'background-image'：'url（'+scope.item.url+'））}）； }); } } }]); 这就是我的html

在我的指令中，我看到的示例使用了

，
链接：功能（范围、要素、属性）{
if（parseInt（scope.index）==0）{
css（{'background-image'：'url（'+scope.item.url+'））}）；
}
元素绑定（'单击'，函数（）{
var src=elem.find（'img'）.attr（'src'）；
css（{'background-image'：'url（'+scope.item.url+'））}）；
});
}
}
}]);

这就是我的html的外观：

<div class="shadow">
  <div class="pictureBox">
    <div id="pictBox">
      <img ng-src="{{primaryImage.url}}">
    </div>
  </div>
  <div class="lowerPictureBox">
    <div ng-repeat="image in item.images" options='#pictBox' itemdata='image' index="$index"     class="smallPictureBox">
      <img ng-src="{{image.url}}">
    </div>
  </div>
</div>

如何使我在下方的图片框中单击图片时，它会显示在图片框中？

虽然我无法复制您的全部示例，但我有一个设置一个小的工作代码，当您单击底部图像时，它会在顶部显示图像这可以帮助您

<!DOCTYPE html>
<html ng-app="demo">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
  </head>
    <body ng-controller="main">
        <div class="shadow">
  <div class="pictureBox">
    <div id="pictBox">
      <img ng-src="{{primaryImage.url}}">
    </div>
  </div>
  <div class="lowerPictureBox">
   <div small linksrc="primaryImage"></div>
  </div>
</div>
        <script>
            var app = angular.module("demo", []);
            app.controller('main', function ($scope) {
                $scope.primaryImage = { url: '' };
            });
            app.directive('small', [function () {
                return {
                    scope: { src: '=linksrc' },
                    replace:true,
                    template:"<img ng-src='http://angularjs.org/img/AngularJS-small.png'>",
                    link: function (scope, elem, attrs) {
                        elem.bind("click", function () {
                            scope.src.url = 'http://angularjs.org/img/AngularJS-small.png';
                            scope.$apply();
                        });

                    }
                }
            }]);


        </script>
</body>

</html>


var-app=angular.module（“演示”，[]）；
应用控制器（'main'，函数（$scope）{
$scope.primaryImage={url:'}；
});
应用指令（'small'，[函数（）{
返回{
作用域：{src:'=linksrc'}，
替换：正确，
模板：“”，
链接：功能（范围、要素、属性）{
元素绑定（“单击”，函数（）{
scope.src.url='0http://angularjs.org/img/AngularJS-small.png';
作用域：$apply（）；
});
}
}
}]);

当您提供指向有效演示的链接，而不是指向使用不起作用代码的演示的链接时，很难提供帮助

<!DOCTYPE html>
<html ng-app="demo">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
  </head>
    <body ng-controller="main">
        <div class="shadow">
  <div class="pictureBox">
    <div id="pictBox">
      <img ng-src="{{primaryImage.url}}">
    </div>
  </div>
  <div class="lowerPictureBox">
   <div small linksrc="primaryImage"></div>
  </div>
</div>
        <script>
            var app = angular.module("demo", []);
            app.controller('main', function ($scope) {
                $scope.primaryImage = { url: '' };
            });
            app.directive('small', [function () {
                return {
                    scope: { src: '=linksrc' },
                    replace:true,
                    template:"<img ng-src='http://angularjs.org/img/AngularJS-small.png'>",
                    link: function (scope, elem, attrs) {
                        elem.bind("click", function () {
                            scope.src.url = 'http://angularjs.org/img/AngularJS-small.png';
                            scope.$apply();
                        });

                    }
                }
            }]);


        </script>
</body>

</html>