在ng-walkthrough指令触发之前设置延迟

时间:2016-04-07 17:28:09

标签: javascript angularjs ionic-framework

我目前正在使用ng-walkthrough指令(Plunker:http://plnkr.co/edit/kHM9zHCxAA3gPYvedmdw?p=preview)为我的应用程序创建一系列屏幕说明。

我想在动画自动加载之前设置延迟。有谁知道这样做的最好方法?

enter image description here

controller.js

$scope.showAccountsWalkthrough = true;

$scope.accountsWalkthrough = {
    steps : [
        {
            id: "new-account-button",
            text : "Some text here"
        },
        {
            id: "scan-all-button",
            text : "Some text here"
        },
        {
            id: "accounts-list",
            text : "Some text here"
        }
    ],
    currentIndex : 0
};

$scope.nextAccountsWalkthrough = function() {
    ionic.requestAnimationFrame(function() {
        if($scope.accountsWalkthrough.currentIndex < $scope.accountsWalkthrough.steps.length-1) {
            $scope.accountsWalkthrough.currentIndex++;
            $scope.showAccountsWalkthrough = true;
        }
    });

}

view.html

<walkthrough
    id="accounts_view_walkthrough"
    walkthrough-type="transparency"
    focus-element-id="{{ accountsWalkthrough.steps[accountsWalkthrough.currentIndex].id }}"
    main-caption="{{ accountsWalkthrough.steps[accountsWalkthrough.currentIndex].text }}"
    force-caption-location="BOTTOM"
    is-active="showAccountsWalkthrough"
    is-bind-click-event-to-body="true"
    on-walkthrough-hide="nextAccountsWalkthrough()"
    is-round="false">
</walkthrough>

1 个答案:

答案 0 :(得分:0)

这解决了这个问题。

    setTimeout(function(){ 
         $scope.showAccountsWalkthrough = true;
    }, 1000);