0

基本上，我想做的是创建一个幻灯片。我为此使用 Angular 的原因是为了从模板中获得好处，并希望一次只将一个模板加载到页面中。

我将数据保存在控制器获取的 JSON 文件中：

JSON：

{
    "prop_title"    : "Hyde Lane, Hyde",
    "prop_postcode" : "SP2 7AP",
    "prop_price"    : "",
    "prop_image"    : "",
    "prop_desc"     : "",
    "template"      : "views/prop-thumbs.html",
    "info_image"    : "",
    "duration"      : "4000"

},

控制器：

function AppCtrl($scope, $http) {

    //GET THE JSON FILE
    $http.get('json/pages.json').success(function (data) {

        //ASSIGN THE PAGES TO THE SCOPE
        $scope.pages = data;

        //LOOP THROUGH THE DATA AND ASSIGN THE VIEW
        for (var i = $scope.pages.length - 1; i >= 0; i--) {

        };

    });
}

从我的 JSON 文件中可以看出，每个元素都包含要使用的视图文件，以及它需要在屏幕上停留的持续时间。此外，正如您在我的控制器中看到的那样，我已经开始创建一个 for 循环，该循环有望包含我的代码，该代码将在计时器上分配视图。这可能吗？什么是最简单和最好的方法？

任何帮助都非常感谢，我现在已经尝试了一切！

4

2 回答 2

1

正如 Mark Rajcok 在评论中指出的那样，您可能需要使用 $timeout
这是我会做的：http: //jsfiddle.net/DotDotDot/zbg57/

html 部分非常简单，我只是告诉 angular 包含whatToInclude变量中的内容：

<div ng-include='whatToInclude'></div>

在控制器端，我使用模板和计数器初始化数据，然后我定义了一个 nextSlide 函数，该函数将使用传入参数的超时调用下一个模板。我调用此函数以使用初始参数（0s 超时，数据的第一个元素）启动循环

$scope.whatToInclude='tpl1.html';
$scope.count=0;
$scope.nextSlide=function(timeOut){
    $timeout(function(){
        $scope.whatToInclude=$scope.data[$scope.count].template
        $scope.count+=1
        if($scope.count>=$scope.data.length)
            $scope.count=0
        $scope.nextSlide($scope.data[$scope.count].duration)
    },timeOut);
};

$scope.nextSlide(0)

我认为这对于幻灯片放映来说是一个好的开始；）

玩得开心

于 2013-08-12T15:44:39.107 回答
1

我制作了一个具有类似目标的教程： https ://www.youtube.com/watch?v=9COtsDovNpM

基本上将视图存储在某种数组中，然后基于变量显示该模板。在 ng-show='true' 之前，Angular 不会加载模板，因此它们不会一次全部加载，而是在单击或循环时加载。

我的教程中的代码示例。用适合你的东西替换 ng-switch。

共同的前提是“当它等于真时显示这个模板”。

<div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li ng-class="{active: main.active.tab == 'info'}">
            <a ng-click='main.active.tab = "info"'>Settings</a>
        </li>

        <li ng-class="{active: main.active.tab == 'categories'}">
            <a ng-click='main.active.tab = "categories"'>Categories</a>
        </li>

        <li ng-class="{active: main.active.tab == 'pages'}">
            <a ng-click='main.active.tab = "pages"'>Pages</a>
        </li>

        <li ng-class="{active: main.active.tab == 'locations'}">
            <a ng-click='main.active.tab = "locations"; main.locationgroup = {}'>Locations</a>
        </li>

        <li ng-class="{active: main.active.tab == 'experts'}">
            <a ng-click='main.active.tab = "experts";'>Experts</a>
        </li>

        <li ng-class="{active: main.active.tab == 'resources'}">
            <a ng-click='main.active.tab = "resources"'>Resources</a>
        </li>
    </ul>

    <div class="tab-content">
        <div ng-switch='main.active.tab'>
            <div
                ng-switch-when='info'
                ng-include='"/apps/series/views/tabs/info.html"'></div>

            <div
                ng-switch-when='categories'
                ng-include='"/apps/series/views/tabs/categories.html"'></div>

            <div
                ng-switch-when='pages'
                ng-include='"/apps/series/views/tabs/pages.html"'></div>

            <div
                ng-switch-when='locations'
                ng-include='"/apps/series/views/tabs/locations.html"'></div>

            <div
                ng-switch-when='experts'
                ng-include='"/apps/series/views/tabs/experts.html"'></div>

            <div
                ng-switch-when='resources'
                ng-include='"/apps/series/views/tabs/resources.html"'></div>
        </div>
    </div>
</div>
于 2013-08-13T01:15:25.803 回答