Question

我必须显示图像相册。直到@media元素width 700px我可以在每张幻灯片上显示3张图片，@media width :700px以下我需要在每张幻灯片上显示1张图片。

为了每张幻灯片显示3张图片，我写了一个函数showfilteredImages();

$scope.imagemaindiv

将包含来自后端的所有图片

$scope.imagemaindiv = [{
    'img': "image1.png",
    "id": 1
}, {
    'img': "image2.png",
    "id": 2
}, {
    'img': "image3.png",
    "id": 3
}, {
    'img': "image4.png",
    "id": 4
}, {
    'img': "image5.png",
    "id": 5
}, {
    'img': "image6.png",
    "id": 6
}]
$scope._firstImgIndex = 0;
$scope._lastImgIndex = 2;
$scope.showFilteredImages = function() {
    $scope.filteredImages = [];
    for (var i = $scope._firstImgIndex; i <= $scope._lastImgIndex; i++) {
        $scope.filteredImages.push($scope.imagemaindiv[i]);
    }
};

Answer 1

以下代码可能对您有用。：）。试试这个。

var data=angular.element($window);
data.bind('resize',function(){

//call your another function here:

});

Answer 2

试试这段代码

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />

    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
    <script src="app.js"></script>
  </head>

  <body>
    <my-directive></my-directive>
  </body>

</html>

<强> app.js

'use strict';

var app = angular.module('app', []);

app.directive('myDirective', ['$window', function ($window) {

     return {
        link: link,
        restrict: 'E',
        template: '<div>window size: {{width}}px</div>'
     };

     function link(scope, element, attrs){

       scope.width = $window.innerWidth;

       angular.element($window).bind('resize', function(){
       alert();
         scope.width = $window.innerWidth;

         // manuall $digest required as resize event
         // is outside of angular
         scope.$digest();
       });

     }

 }]);

调整窗口大小时调用另一个函数

2 个答案: