Question

我尝试使用客户jquery.hover在悬停新闻项目时产生背景效果。所以我把它放在一个指令

中

的index.html

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myapp">

<head>
  <title></title>
  <base href="/">
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.0/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
  <script src="jquery.hoverdir.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>

  <style>
    .da-thumbs {
      list-style: none;
      position: relative;
      margin: 30px auto;
      padding: 0;
    }
    .da-thumbs li {
      float: left;
      position: relative;
      width: 320px;
      height: 320px;
    }
    .da-thumbs li a {
      overflow: hidden;
      color: #fff;
      display: block;
      position: relative;
    }
    .da-thumbs li a img {
      width: 320px;
      height: 320px;
    }
    .da-thumbs li a div {
      position: absolute;
      width: 100%;
      height: 100%;
      padding: 20px;
    }
    .new-highlight div {
      font-size: 1.8em;
      font-weight: 700;
      text-shadow: 1px 2px #cc731b;
      padding-top: 40px;
      text-align: center;
      letter-spacing: -1px;
      background: url(images/opc80.png) repeat;
    }
    .event-hot div {
      background: rgba(0, 0, 0, 0.5)
    }
    .event-hot h4 {
      text-transform: uppercase;
      margin-bottom: 20px;
      font-weight: 700;
      text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    }
  </style>

  <script>
      var app = angular.module('myapp', []);
      app.controller('homeCtrl', function ($scope) {
          $scope.featuredEvents = {
              data: [{
                  Title: 'title 1',
                  Short: 'short 1',
                  ImageUrl: 'http://www.vincomshoppingmall.com/vi-VN/Images/Thumb.axd?ID=1153'
              }, {
                  Title: 'title 2',
                  Short: 'short 2',
                  ImageUrl: 'http://www.vincomshoppingmall.com/vi-VN/Images/Thumb.axd?ID=1152'
              }]
          };
      });
      app.directive('hotEvent', ['$document',
        function ($document) {
            return {
                restrict: 'EA',
                templateUrl: 'events.html',
                link: function ($scope, iElement, attrs) {
                    //attrs references any attributes on the directive element in html

                    angular.element(document).ready(function () {
                        var dathumb = $(iElement).find('.da-thumbs > li a');
                        //$scope.$evalAsync(function () {
                        console.log('?: ' + dathumb.length);
                        dathumb.each(function () {
                            $(this).hoverdir();

                        });
                        //});
                    });
                }
            }
        }
      ]);
  </script>
</head>

<body ng-controller="homeCtrl">

  <div hot-event></div>


</body>

</html>

events.html

<ul class="row da-thumbs event-hot">
<li ng-repeat="news in featuredEvents.data">
    <a href="/">
        <img src="{{news.ImageUrl}}" />
        <div>
            <h4>{{news.Title}}</h4>
            <p>
               {{news.Short}}
            </p>
        </div>
    </a>
</li>

在visual studio上，它可以工作，但有时即使在ctrl-f5之后也没有显示效果。（chrome得到禁用缓存）

plnker link here，不知道为什么它也没有出现在plunker上。

使用angularjs指令悬停图像效果

0 个答案: