1

関数をパラメーターとして受け取るディレクティブを作成しています。ディレクティブは実行され、関数に含まれるものは何でも実行します。

ユースケースは次のとおりです。

  • ディレクティブにはリンクが含まれています
  • ユーザーがリンクをクリックすると、(コントローラーから) パラメーターとして渡されたメソッドが実行されます
  • ユーザーがクリックボタンを押すと、スピナーが表示されます
  • メソッドの実行が終了すると、スピナーは非表示になります

私の質問は、メソッドの実行後にスピナーを非表示にするために、実行を延期してプロミスにバインドする方法です。

説明のために、3 から 1 までカウントする$timeoutを使用しました。これまでに行ったコードを見てください。

app.directive('toogleTextLink', function($compile,$q) {
    return {
        restrict: 'AE',
        scope: { callback: "&targetMethod" },
        template: '<div><a style="cursor: pointer" ><b>{{text}}</b></a>show value= {{show}}  <br/><div ng-class="{previewLoader: show}"></div></div>',
        link: function (scope, element, attr) {
            scope.value = attr.value;
            scope.show = false;
            scope.$watch('value', function () {
                    if (scope.value) {
                        scope.text = "yes";
                    } else {
                        scope.text = "no";
                    }
            });
            element.bind('click', function () {
                scope.show = true;
                scope.value = !scope.value;
                scope.$digest();
                if (scope.callback) {
                    var deferred = $q.defer(scope.callback());
                    deferred.promise.then(function () {
                        scope.show = false;
                        console.log("then called");
                    });

                }

            });
        }
    };
});

  app.controller('myCtrl', function($scope,$timeout,$q) {
  $scope.IsFacebookConnected = false;
  $scope.countDown = 3;
  $scope.authSocial = function(value, socialNetwork) {
        switch (socialNetwork) {
            case "facebook":
                $scope.IsFacebookConnected = !value;
        }

         runCounter = function() {
             $scope.countDown -= 1;            
            if ( $scope.countDown > 0)        
                $timeout(runCounter, 1000); 
                console.log("timer");
        };
        runCounter();
    };

});

これもプランカーです。

4

1 に答える 1

2

Andy Joslin は、必要なことを正確に実行する "promise tracker" を作成しました。$http 統合のための砂糖も含まれています。基本的に「約束」を追加すると、実行状態が通知されます。次に、読み込み中のスピナー アニメーションなどで、その実行状態を ng-show にバインドできます。https://github.com/ajoslin/angular-promise-trackerおよびここにデモがあります: http://plnkr.co/edit/3uAe0NdXLz1lCYlhpaMp?p=preview

コードは次のようになります。

$scope.tracker = promiseTracker("socialtracker");
$scope.tracker.addPromise(somePromise);

そしてあなたの見解では：

<div ng-show="tracker.active()">Loading...</div>
于 2013-11-06T19:03:23.333 に答える