15

我正在使用 AngularJS、jQuery、HTML、CSS 和 Bootstrap 制作一个 Web 应用程序，我想从位于 Apache2 服务器中的 JSON 中挑选一些图像链接，并使用它们在我的主页中呈现这些图像. 我也想像在旋转木马中一样滑动它们。为了完成这项工作，我正在尝试使用iDangero.us Swiper。

当我用 3 个分开的 div 选择我的图像时，我没有问题。我得到我的图像，然后我通常可以随意滑动它们。我这样做如下所示：

主要.html：

<div ng-init="initGetRequestMain()">

  <div class="swiper-slide" ng-click="swipers()" 
              style="{{data.background1}}"></div>
  <div class="swiper-slide" ng-click="swipers()" 
              style="{{data.background2}}"></div>
  <div class="swiper-slide" ng-click="swipers()" 
              style="{{data.background3}}"></div>

   <script src="scripts/custom/main/swipers.js"></script>
</div>

我使用 Swiper 从一个图像滑动到另一个图像，它似乎可以正常工作。这是一个 jQuery 插件，你可以在这个链接上看到一些演示。

Swipers.js：

angular.module('swipers', [])
       .controller('',[ 
        $(document).ready(function (){
           var swiper = new Swiper('.swiper-container',{
           direction: 'horizontal',
           pagination: '.swiper-pagination',
           paginationClickable: true
       })
})]);

杰森：

"background1":"background-image: url(images/img1.jpg)",
"background2":"background-image: url(images/img2.jpg)",
"background3":"background-image: url(images/img3.jpg)"

主控制器.js：

  myApp.controller('MainController', ["$scope","$http",                
                  function($scope,$http){

      $scope.initGetRequestMain = function(){

       $http.get('http://localhost/main.json').success(function(data){

         $scope.data=data;
       })
      }
  }]);

问题是，当我尝试使用ng-repeat而不是 3 个单独的 div 时，我再也看不到它们，并且我的 Swiper 脚本在它们完全加载之前触发。我的控制台或 JSON 中没有错误（使用 JSONLint 验证）。下面，我在这两种情况下添加了我的输出的 2 个屏幕截图。

使用 3 个单独的 div：

使用 3 个单独的 div

不使用 ng-repeat：

不使用 ng-repeat

这是我尝试使ng-repeat工作保持与以前相同的控制器和相同的 Swiper 脚本的代码：

主要.html：

  <div ng-init="initGetRequestMain()">

       <div ng-repeat="slide in data.slides" isLoaded="">
           <div class="swiper-slide" style="{{slide.background}}" 
                       ng-click="swipers()"></div>
       </div>

    <script type="text/javascript-lazy" src="scripts/custom/main/swipers.js"></script>
  </div>

mainJson.json：

"slides":[
            {"background":"background-image:url('images/img1.jpg')"},
            {"background":"background-image:url('images/img2.jpg')"},
            {"background":"background-image: url('images/img3.jpg')"}
],

为了在触发脚本之前加载我的图像，我正在尝试使用 2 个自定义指令。

isLoaded告诉我最后一个ng-repeat元素何时加载并设置pageIsLoaded = true;：

myApp.directive('isLoaded', function (){

   return{
     scope:true,
     restrict: 'A', //Attribute type
     link: function (scope, elements, arguments){ 

        if (scope.$last === true) {
            scope.pageIsReady = true;
            console.log('page Is Ready!');
         }
     }   
   }
})

gettingTheScript等待pageIsLoaded = true;并加载脚本：

myApp.directive('src', function (){

     return{
       scope:true,
       restrict: 'A', //Attribute type
       link: function (scope, elements, arguments){

            scope.$on(pageIsReady===true, function(){
                   if (attr.type === 'text/javascript-lazy'){

                       scope.scriptLink = arguments.src;
                    }
             })
         },
         replace: true, //replaces our element 
         template: '{{scriptLink}}'
       }
  })

他们似乎没有解决我的问题。console.log('page Is Ready!');做第一个的时候我也看不到。

当我必须在页面加载后触发像 Swiper 这样的脚本以避免此类问题时，我只是遇到了一些麻烦。我的图像似乎没有高度。我认为这个问题是由于ng-repeat在触发我的脚本之前没有完全加载造成的。

我究竟做错了什么？有更好的解决方案吗？

4

3 回答 3

11

在讨论如何使这项工作之前，这些类型的 jQuery 插件中的大多数都不能很好地与 angular 配合使用，因为它们会修改 angular 不知道的 DOM。

话虽如此，诀窍是将 jQuery 插件的调用推迟到 Angular 渲染 DOM 之后。

首先，将您的 swiper 插件放入指令中：

.directive('swiper', function($timeout) {
    return {
        link: function(scope, element, attr) {
            //Option 1 - on ng-repeat change notification
            scope.$on('content-changed', function() {
                new Swiper(element , {
                    direction: 'horizontal',
                    pagination: '.swiper-pagination',
                    paginationClickable: true);
            }
            //Option 2 - using $timeout
            $timeout(function(){
                new Swiper(element , {
                    direction: 'horizontal',
                    pagination: '.swiper-pagination',
                    paginationClickable: true);
            });

        }
    };
})

对于选项 1，您需要修改 isLoaded 指令

myApp.directive('isLoaded', function (){

   return{
     scope:false, //don't need a new scope
     restrict: 'A', //Attribute type
     link: function (scope, elements, arguments){ 

        if (scope.$last) {
            scope.$emit('content-changed');
            console.log('page Is Ready!');
        }
     }   
   }
})

最后，您的标记（注意从 isLoaded 到 is-loaded 的变化......这可能是您没有看到通知的原因）。

<div ng-init="initGetRequestMain()" swiper>

   <div ng-repeat="slide in data.slides" is-loaded>
       <div class="swiper-slide" style="{{slide.background}}" 
                   ng-click="swipers()"></div>
   </div>
</div>

如前所述，大多数具有轮播功能的 jQuery 插件不能很好地处理对 DOM 的更改（即新元素）。即使使用这两个选项，如果在首次渲染 ng-repeat 后更改模型，您也可能会看到意想不到的事情。但是，如果您的模型是静态的，这应该适合您。如果您的模型发生变化，那么您可能想要搜索更“有角度”的轮播指令。

于 2015-05-31T15:43:01.310 回答
4

您可以使用一种更简单的方法，它已融入 Swiper.js。初始化 swiper 时，只需将观察者属性设置为 true。这将使 Swiper 监视您的幻灯片的更改，因此您不必担心它是否在通过 ng-repeat 添加所有幻灯片之前运行。

例子：

var galleryTop = new Swiper('.gallery-top', { observer: true });

并且来自关于观察者属性的 Swiper 文档：

设置为 true 以在 Swiper 及其元素上启用 Mutation Observer。在这种情况下，如果您更改其样式（如隐藏/显示）或修改其子元素（如添加/删除幻灯片），每次 Swiper 都会更新（重新初始化）

于 2016-08-22T21:11:56.027 回答
0

我正在回答这个老问题，因为有些人要求我这样做，因为我想帮助其他开发人员解决这个“有趣”的问题。

一年多后，我设法使用Promisesand解决了这个问题Factories。

本质上，我制作了一个Factory，ItemFactory确保获得所有需要的项目（在本例中为幻灯片），然后，我制作了另一个Factory, SwiperFactory，它使用 aPromise来触发那个有趣的家伙，swipers()。我将所有这些工厂方法调用到 aMainController中，在获取幻灯片并触发脚本后，它$scope.apply();会反映主视图中的更改。

主要.html：

//MainController known as mainCtrl
<div ng-repeat="slide in mainCtrl.slides">
  <div class="swiper-slide" ng-click="mainCtrl.swipers()"></div>
</div>

主控制器.js：

angular
.module('myApp')
.controller('MainController', MainController);

function MainController($scope, ItemFactory, SwiperFactory) {

   var vm    = this;
   //Initializing slides as an empty array
   vm.slides = [];

   /** Gets called as soon as the Controller is called **/
   getData('main.json');

   function getData(path){
      ItemFactory.getItems(path).then( function(response){

        //If response is not empty
        if (response) {
           //Assigning fetched items to vm.items
           vm.slides = response.data;
        }

        //Calling triggerSwiper after we ensured fetching item data
        SwiperFactory.triggerSwiper();

        //Callig $scope.$apply() to reflect correctly the changes in the view
        $scope.$apply();
      })
   };

}

项目工厂.js：

angular
.module('myApp')
.factory('ItemFactory', function ($http) {

    /** Using this referring as ItemFactory Controller **/
    var vm     = this;
    vm.API_URL = 'http://localhost/';

    /** Gets items from API based on jsonPath **/
    function getItems(jsonPath) {
        return $http.get(vm.API_URL + jsonPath
        ).then(function (response) {
            return (response);
        });
    }

    //Exposing getItems method
    return {
        getItems : getItems
    }
});

SwiperFactory.js：

angular
.module('myApp')
.factory('SwiperFactory', function () {

    /** Using this referring as SwiperFactory Controller **/
    var vm     = this;

    /** Triggers Swiper Script 
     *  Resolving only after swiper has been triggered **/
    function triggerSwiper(){
      return new Promise( function(resolve, reject){
        resolve({
            $(document).ready(function (){
                var swiper = new Swiper('.swiper-container',{
                direction           : 'horizontal',
                pagination          : '.swiper-pagination',
                paginationClickable : true
            })
        });

      }, function(error){
         console.log('Error while triggering Swiper');
      })

    }

    //Exposing triggerSwiper method
    return {
        triggerSwiper : triggerSwiper
    }
});
  • $scope.$apply();可以去掉，其实不是必须的
  • 一般来说，这种方法适用于异步任务

上面的代码可以工作，但是，请注意我在下面所说的

尽量避免在 AngularJS 项目中使用 jQuery 库，例如 iDangero.us Swiper。相反，寻找一个可以实现相同工作的 Angular 库。如果那时我像现在一样熟练，我永远不会使用它，特别是对于这些$(document).ready东西。相反，学习 Promises 或 AngularJS 的方法。总的来说，我对 AngularJS 和 Web 开发完全陌生，所以我做出了错误的决定。

我希望我对您有所帮助。

于 2016-07-26T19:17:19.563 回答