AngularJS 中的承诺跟踪器答案

【问题标题】：promise-tracker in AngularJSAngularJS 中的承诺跟踪器
【发布时间】：2013-07-11 20:57:35
【问题描述】：

我在使用 promise-tracker 时遇到问题。

我想要的是跟踪对话。我的部分代码如下：

js：

angular.module('myModule', ['ajoslin.promise-tracker'])
  .factory('Conversation', function (promiseTracker) {
    return {
      addMessage: function (opts) {
        /* Post data to server */
        var promise = POSTING DATA;
        promiseTracker('message').addPromise(promise);
      },
      removeMessage: function (opts) {
        /* Delete data */
      }
    }
  })

  .directive('newMessage', function (Conversation) {
    return {
      scope: true,
      restrict: 'EA',
      link: function (scope) {
        scope.addMessage = function () {
          Conversation.addMessage( { /* Some opts */ } )
        }
      }
    }
  })

  .directive('Tracker', function (promiseTracker) {
    var opts = { /* Spinner opts */  }
    return {
      scope: true,
      replace: true,
      restrict: 'EA',
      templateUrl: 'tracker.html',
      link: function (scope, element, attrs) {
        /* new spinner */
        scope.tracker = promiseTracker(attrs.tracker);
        /* And some thing */
      }
    }
  })

新消息.html：

<form name="myForm" new-message>
    <input type="text" name="content" />
    <i tracker="message" ></i>
</form>

tracker.html：

<div>
    <div>
        <i ng-show="tracker.active()" ng-show="!isHidden"></i>
    </div>
    <input type="submit" value="submit" ng-click="addMessage()" ng-disabled="tracker.active()">
</div>

使用这些代码，当页面中只有一个表单时效果很好。

但是当我在模板中添加更多表单时，它出现了一些问题。

跟踪承诺时，所有微调器都会显示！

now result(click)

这就是我想要的：

hope result(click)

我想我的范围有问题。但我不知道如何解决它。

谁能帮帮我？谢谢！

【问题讨论】：

标签： angularjs angularjs-directive angularjs-scope promise tracker

【解决方案1】：

如果您想为您的应用显示加载微调器图形，您需要一个全局范围承诺跟踪器 - 一个直接来自官方文档的示例：

angular.module('app', ['ajoslin.promise-tracker'])

.factory('myTracker', function (promiseTracker) {
  return promiseTracker();
})

.controller('AppCtrl', function ($rootScope, myTracker) {
  $rootScope.$watch(myTracker.active, function (isActive) {
    //doSomething()
  });
});

【讨论】：