Question

基本上，我尝试做的是制作幻灯片。我之所以使用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循环，希望包含我的代码，该代码将在计时器上分配视图。这可能吗？什么是最简单，最好的方法呢？

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

Answer 1

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

html部分很简单，我只是告诉角度来包含whatToInclude变量中的内容：

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

在控制器端，我使用模板和计数器初始化数据，然后我定义了一个nextSlide函数，它将使用参数中传递的超时调用下一个模板。我调用此函数以使用initials参数（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)

我认为这可以是幻灯片放映的良好开端;）

玩得开心

Answer 2

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

基本上将视图存储在某种数组中，然后基于变量显示该模板。在ng-show =＆＃39; true＆＃39;之前，Angular不会加载模板。因此，他们不会立即加载所有内容，但是当他们点击或循环播放时。

我的教程中的代码示例。将ng-switch替换为适用于您的任何设备。

共同前提是＆＃34;当该模板等于true时显示此模板＆＃34;。

<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>

在AngularJS中的计时器之后自动从控制器加载视图

2 个答案: