Question

在我的指令中，我查看here的示例使用<a href="#" ...将新图像放入容器div中。我试图在我的指令中创建相同的功能但是当我点击我的图像时它不会改变我的pictBox div。我可以在我的css文件中遗漏一些东西吗？为什么背景图像文本在那里？这是我的指示：

app.directive('smallPictureBox', [function(){
    return {
        restrict: 'CA',
        replace: false,
        transclude: false,
        scope: {
            index: '=index',
            item: '=itemdata'
        },
        template: '<a href="#"><img src="{{item.url}}"/></a>',
        link: function(scope, elem, attrs) {

            if (parseInt(scope.index)==0) {
                angular.element(attrs.options).css({'background-image':'url('+ scope.item.url +')'});
            }

            elem.bind('click', function() {
                var src = elem.find('img').attr('src');

                angular.element(attrs.options).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>

如何才能让我点击lowerPictureBox中的图片时将其显示在pictureBox中？

Answer 1

虽然我无法复制你的整个例子但是我设置了一个小的工作代码，当你点击底部图像时它会显示在顶部，这可以帮助你

<!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>

如何用角度中的另一个图像更新div？

1 个答案: