如何在 angularjs 和 ng-view 中为灯箱模式中的图像提供动态路径？

Question

我下载了一个模板，并将 Angularjs 应用于该 template.That 模板使用了各种 Jquery 插件，例如 flexslider、Chocolat（灯箱插件）等

我的代码片段如上 index.html

<head>
  <link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen" charset="utf-8" />
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.chocolat.js"></script>
  <script type="text/javascript" type="text/javascript" src="js/angular.js"></script>
  <script type="text/javascript" type="text/javascript" src="js/angular-route.min.js"></script>
</head>

<div class="banner ban1">
  <div class="container">
    <div class="top-menu">
      <span class="menu"><img src="images/nav.png" alt=""/> </span>
      <ul>
        <li><a href="/curabitur/#/" ng-class="{active: isActive('/')}">home</a>
        </li>
        <li><a ng-class="{active: isActive('/about')}" href="/curabitur/#/about">about</a>
        </li>
        <li><a ng-class="{active: isActive('/menu')}" href="/curabitur/#/menu">menus</a>
        </li>
        <li><a ng-class="{active: isActive('/gallery')}" href="/curabitur/#/gallery">gallery</a>
        </li>
        <li><a ng-class="{active: isActive('/events')}" href="/curabitur/#/events">events</a>
        </li>
        <li><a ng-class="{active: isActive('/contact')}" href="/curabitur/#/contact">contact</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<body>
  <div ng-view class="content"></div>
</body>
<script type="text/javascript" src="js/services.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/app.js"></script>

我使用 ng-view 实现了路由在我的 gallery.html 作为模板（/图库）

<div class="gallery-info" style="border : 1px solid;">
   <div class="col-md-4 galry-grids moments-bottom" ng-repeat=" gallery in galleryCollection.galleryItems"   style="border : 1px solid green;">
    <a light-box class="b-link-stripe b-animate-go" ng-src="{{gallery.galleryImageUrl}}">        {{gallery.galleryImageUrl}}
     <img  src="{{gallery.galleryImageUrl}}" class="img-responsive" alt="">
  <div class="b-wrapper">
    <span class="b-animate b-from-left b-delay03">
    <img class="img-responsive" src="{{gallery.galleryBigImageUrl}}" alt=""/> 
   </span>     
  </div>
 </a> 
  </div>
  <div class="clearfix"></div>
</div>

和app.js作为

angular.module("curabitur", ['ngRoute', 'curabitur.controller'])
  .config(function($routeProvider) {
    $routeProvider
      .when("/gallery", {
        templateUrl: './partials/gallery.html',
        controller: 'galleryController'

      })
      .when("/menu", {
        templateUrl: './partials/menu.html',
        controller: 'menuController'

      })....other when blocks
  });

画廊的控制器在 controller.js 作为

angular.module("curabitur.controller", ['ui.bootstrap', 'curabitur.services'])
  .directive('lightBox', function() {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        console.log("lightbox directive");
        console.log("lightbox function");
        $(element).Chocolat();
        $('.moments-bottom a').Chocolat();
        $(function() {
          $('.moments-bottom a').Chocolat();
          //alert($('.moments-bottom '));
        });
      }
    };
  })
  .controller("galleryController", function($scope) {
      $scope.galleryCollection = {
        "galleryId": "",
        "galleryHeading": "EVENTS",
        "galleryItems": [{
          "galleryImageId": "",
          "galleryImageUrl": "images/g1.jpg",
          "galleryBigImageUrl": "images/e.png",
          "galleryimageLink": ""


        }, {
          "galleryImageId": "",
          "galleryImageUrl": "images/g2.jpg",
          "galleryBigImageUrl": "images/e.png",
          "galleryimageLink": ""


        }, ]
      };

My question is that How should I assign dynamic value to in gallery.html where light-box directive is called? After clicking image in div image path is not getting to I also tried ng-href but it doesn't work. I referred following link. anchor tags and dynamic views in angular.js

Answer 1

您可以像这样使用 ng-src 指令 ng-src="{{gallery.galleryBigImageUrl}}"

绑定后会告诉anguar加载图片

Answer 2

在 controller.js 中的 light-box 指令中，我访问了元素并设置了 href 属性到那个元素，

.directive('lightBox', function() {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
            console.log("lightbox directive");
            console.log("lightbox function");
            /* set image url attribute */
            element.attr("href",scope.gallery.galleryImageUrl)
            /* call to plugin */ 
            $(element).Chocolat();
            $('.moments-bottom a').Chocolat();
            $(function() {
                $('.moments-bottom a').Chocolat();
                //alert($('.moments-bottom '));
            });
      }
};

});

并将#放入gallery.html中作为

<a light-box class="b-link-stripe b-animate-go" href="#">
  <img src="{{gallery.galleryImageUrl}}" class="img-responsive" alt="">
  <div class="b-wrapper">
    <span class="b-animate b-from-left b-delay03">
    <img class="img-responsive" src="{{gallery.galleryBigImageUrl}}" alt=""/> 
  </span> 
  </div>
</a>

如何在 angularjs 和 ng-view 中为灯箱模式中的图像提供动态路径？

how to give dynamic path to image on lightbox modal in angularjs along with ng-view?

javascript

jquery

angularjs

angularjs-routing