1

我有以下代码（它不适用于 jsfiddle，但如果将其保存为 index.html 则可以）

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
    <script>
      var photos = [
        {"url":"http://archive.vetknowledge.com/files/images/guinea-pig---tan.jpg"},
        {"url":"http://www.rfadventures.com/images/Animals/Mammals/guinea%20pig.jpg"}
      ];

      angular.module('app', [])

      .directive('ngBackground', function(){
        return function(scope, element, attrs){
          var url = attrs.ngBackground;
          element.css({
            'background-image': 'url(' + url + ')',
            'background-size' : 'cover'
          });
        };
      })

      .controller('PhotosCtrl', function($scope){
        $scope.photos = photos;
        $scope.flags = {
          modalOpen: false,
          imgSrc: null
        };

        $scope.doModal = function(url){
          if(url != false) {
            $scope.flags.imgSrc = url;
            $scope.flags.modalOpen = true;
          } else $scope.flags.modalOpen = false;
        };

        $scope.sourcifier = function(url){
          var temp = document.createElement('a');
          temp.href = url;

          if(temp.hostname.substring(0, 4) == 'www.')
            return temp.hostname.substring(4);
            else return temp.hostname;
        };
      });
    </script>
  </head>
  <body>
    <div ng-controller="PhotosCtrl">

      <div ng-repeat="photo in photos" class="item">
        <img ng-src="{{photo.url}}" ng-click="doModal(photo.url)">
        <p><a ng-href="{{photo.url}}" target="_blank">{{sourcifier(photo.url)}}</a></p>
      </div>

      <div ng-show="flags.modalOpen" ng-click="doModal(false)">
        <div ng-background="{{flags.imgSrc}}">my background should be of the clicked image</div>
      </div>

    </div>
  </body>
</html>

这基本上从数组“照片”加载图像并显示它们。我想要实现的是使用自定义创建的 ng-background 指令将 div 的背景图像更改为单击的图像 src。

它根本不起作用！现在，我确信 flags.imgSrc 是正确的，因为如果我在 img 标签上使用 ng-src，它确实有效。似乎自定义指令 ng-background 并没有“刷新”该标志的值。

任何想法为什么以及如何解决这个问题？提前致谢。

4

1 回答 1

2

您需要$watch进行flags.imgSrc更改：

.directive('ngBackground', function(){
     return function(scope, element, attrs){
          var url = attrs.ngBackground;

          scope.$watch(url,function(n,o){
             if(!n) return;

             element.css({
              'background-image': 'url(' + n + ')',
              'background-size' : 'cover'
            });

          },true);

        };
    });

看看：http ://plnkr.co/edit/JXmG7L?p=preview

更新：但是收听元素' attributes'变化的正确方法是$observe方法：

    attrs.$observe("ngBackground",function(n,o){ /* same handler code */ });

更新 plunk：http ://plnkr.co/edit/fOOCOd?p=preview

于 2013-09-15T11:04:51.593 回答