如何使用 AngularJS 在后台为图像滑块加载新数据

Question

基本上我在 ASP 和 AngularJs 中创建了一个项目来从文件夹中获取 image/video 数据并将其全屏显示在网页上，如滑块。数据位于一个文件夹中，具有特定的命名约定，该约定被修剪以构成幻灯片间隔和 start/end 日期。

示例：

*10000*_*2018-02-05*,*2018-02-12*~backgroundVideo.mp4 <br/>
10 Second slide, Start 02/05/2018 and End 02/12/2018.

该应用程序运行良好。在 Web 应用程序的初始启动时，会出现一个加载栏，首先加载所有图像数据，然后开始显示内容。

我的问题：
我需要找出在显示图像时动态加载新数据的最佳方法。从技术上讲，我需要找出一种方法来检查新的 content/change 并在显示图像时将其加载到后台（我假设 AJAX 调用将使它起作用）。我希望加载栏只在启动时出现，而不是在加载新内容时出现。

HTML:

<body ng-controller="SlideCtrl" style="background-color: #1f567c;">


<div class="col-xs-12" height="100%" ng-if="progress !== 100">
    <progressbar class="progress-striped progress-bar-warning" value="progress">{{progress | number:0}}%</progressbar>
</div>
<embed ng-show="loaded" width="100%" height="100%" bg-image class="fullBg {{currentAnimation}}" ng-repeat="slide in slides"
    ng-if="isCurrentSlideIndex($index)"
    ng-src="{{slide.src}}" />

Angular 应用启动：

    var app = angular.module('website', ['ngAnimate', 'ui.bootstrap']);
    app.controller('SlideCtrl', function ($scope, $timeout, QueueService) {

        slides = [<%=getLocation()%>];

        function setCurrentSlideIndex(index) {
            $scope.currentIndex = index;
        }

        function isCurrentSlideIndex(index) {
            return $scope.currentIndex === index;
        }

        function nextSlide() {
            $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
            var interval = $scope.slides[$scope.currentIndex].interval;
            $timeout(nextSlide, interval);
        }

        function setCurrentAnimation(animation) {
            $scope.currentAnimation = animation;
        }

        function isCurrentAnimation(animation) {
            return $scope.currentAnimation === animation;
        }

        function loadSlides() {
            QueueService.loadManifest(slides);
        }

        $scope.$on('queueProgress', function (event, queueProgress) {
            $scope.$apply(function () {
                $scope.progress = queueProgress.progress * 100;
            });
        });

        $scope.$on('queueComplete', function (event, slides) {
            $scope.$apply(function () {
                $scope.slides = slides;
                $scope.loaded = true;
                var interval = $scope.slides[$scope.currentIndex].interval;
                $timeout(nextSlide, interval);
            });
        });

        $scope.progress = 0;
        $scope.loaded = false;
        $scope.currentIndex = 0;
        $scope.currentAnimation = 'fade-in-animation';

        $scope.setCurrentSlideIndex = setCurrentSlideIndex;
        $scope.isCurrentSlideIndex = isCurrentSlideIndex;
        $scope.setCurrentAnimation = setCurrentAnimation;
        $scope.isCurrentAnimation = isCurrentAnimation;

        $scope.refreshData = function () {
            location.reload();
         };
        loadSlides();
    });

    app.factory('QueueService', function ($rootScope) {
        var queue = new createjs.LoadQueue(true);

        function loadManifest(manifest) {
            queue.loadManifest(manifest);

            queue.on('progress', function (event) {
                $rootScope.$broadcast('queueProgress', event);
            });

            queue.on('complete', function () {
                $rootScope.$broadcast('queueComplete', manifest);
            });
        }

        return {
            loadManifest: loadManifest
        }
    })

    app.animation('.slide-left-animation', function ($window) {
        return {
            enter: function (element, done) {
                TweenMax.fromTo(element, 1, { left: $window.innerWidth }, { left: 0, onComplete: done });
            },

            leave: function (element, done) {
                TweenMax.to(element, 1, { left: -$window.innerWidth, onComplete: done });
            }
        };
    });

    app.animation('.slide-down-animation', function ($window) {
        return {
            enter: function (element, done) {
                TweenMax.fromTo(element, 1, { top: -$window.innerHeight }, { top: 0, onComplete: done });
            },

            leave: function (element, done) {
                TweenMax.to(element, 1, { top: $window.innerHeight, onComplete: done });
            }
        };
    });

    app.animation('.fade-in-animation', function ($window) {
        return {
            enter: function (element, done) {
                TweenMax.fromTo(element, 1, { opacity: 0 }, { opacity: 1, onComplete: done });
            },

            leave: function (element, done) {
                TweenMax.to(element, 1, { opacity: 0, onComplete: done });
            }
        };
    });

    app.directive('bgImage', function ($window, $timeout) {
        return function (scope, element, attrs) {
            var resizeBG = function () {
                var bgwidth = element.width();
                var bgheight = element.height();

                var winwidth = $window.innerWidth;
                var winheight = $window.innerHeight;

                var widthratio = winwidth / bgwidth;
                var heightratio = winheight / bgheight;

                var widthdiff = heightratio * bgwidth;
                var heightdiff = widthratio * bgheight;

                if (heightdiff > winheight) {
                    element.css({
                        width: winwidth + 'px',
                        height: heightdiff + 'px'
                    });
                } else {
                    element.css({
                        width: widthdiff + 'px',
                        height: winheight + 'px'
                    });
                }
            };

            var windowElement = angular.element($window);
            windowElement.resize(resizeBG);

            element.bind('load', function () {
                resizeBG();
            });
        }
    });

后端 (<%=getLocation()%>)

 //CONDITIONS TO DETERMINE LOCATION OF DEVICE AND PULL ACCURATE DATA
    [WebMethod]
    public static string getLocation()
    {
        var location = HttpContext.Current.Request.QueryString["location"];

        //ATRIUM & CAFE
        if (location == "atrium")
        {
            return getFiles(@"\\HOST\FOLDER\FOLDER\FOLDER\FOLDER\FOLDER\FOLDER\IMAGES\", "/FOLDER/FOLDER/FOLDER/FOLDER/FOLDER/IMAGES/");
        }
        else if (location == "cafeteria")
        {
            return getFiles(@"\\HOST\FOLDER\FOLDER\FOLDER\FOLDER\FOLDER\FOLDER\IMAGES\", "/FOLDER/FOLDER/FOLDER/FOLDER/FOLDER/IMAGES/");
        }

        //GLOBAL
        return location;
    }

    [WebMethod]
    public static string getFiles(string location, string imageData)
    {

        DirectoryInfo d = new DirectoryInfo(location);
        FileInfo[] Files = d.GetFiles();
        string displayedFiles = "";
        string Interval = "";
        string DateStart = "";
        string DateEnd = "";

        foreach (FileInfo file in Files)
        {
            if (file.Name != "Thumbs.db") {
                string fileName = file.Name;
                string[] plusParts = null;

                string[] underscoreParts = fileName.Split(new char[] { '~' });

                if (underscoreParts.Length > 0)
                {
                    underscoreParts = underscoreParts[0].Split(new char[] { ',' });
                }
                if (underscoreParts.Length > 0)
                {
                    plusParts = underscoreParts[0].Split(new char[] { '_' });
                }

                Interval = plusParts[0];
                DateStart = plusParts[1];
                DateEnd = underscoreParts[1];

                DateTime today = DateTime.Now;
                DateTime startDate = Convert.ToDateTime(DateStart);
                DateTime endDate = Convert.ToDateTime(DateEnd);

                if (today > startDate && today < endDate)
                {
                    try
                    {
                        displayedFiles += "{interval:" + Interval + ", src:\"" + imageData + "" + file.Name + "\"},";
                    }
                    catch
                    {
                    }
                } else
                {
                    string rootFolderPath = location;
                    string filesToDelete = fileName;   // Only delete DOC files containing "DeleteMe" in their filenames
                    string[] fileList = System.IO.Directory.GetFiles(rootFolderPath, filesToDelete);
                    foreach (string fileDel in fileList)
                    {
                      //File.Delete(fileDel);
                    }
                }
                }
            }
        return displayedFiles.TrimEnd(displayedFiles[displayedFiles.Length - 1]);
    }

谢谢大家的帮助。

Answer 1

看起来您正在做一些通常不会做的事情。

首先，您似乎正在使用 ASP.NET 为您的 angular 应用程序生成 javascript；并通过 <%=var%> 语法硬编码 JSON 嵌入。

这会在您的前端和后端之间建立非常紧密的耦合。这也意味着您将生成与后续加载截然不同的初始加载。这意味着您需要维护更多代码。

其次，您似乎在 C# 代码中手动生成 JSON 字符串；你真的应该使用 something like JSON.NET.

您需要查看并处理响应数据。在此 link 中，您会将其端点 route/url 替换为您的 WebMethod。

如何使用 AngularJS 在后台为图像滑块加载新数据

How to load new data in the background for an Image Slider using AngularJS

c#

asp.net

image

loading

angularjs