2

我有一个使用 ui-router 的 Angular 应用程序，如下所示：

var app = angular.module('app', ['ui.router']).run(function ($rootScope, $state) {
  $rootScope.$state = $state;
});

我已经使用 ui-router 定义了状态：

$stateProvider
  .state('app', {
    abstract: true,
    url: '',
    templateUrl: 'partials/app.html',
    resolve: {
      appState: 'appState'
    },
    controller: 'appCtrl'
  })
  .state('app.state1', {
    ...
  })
  .state('app.state2', {
    ...
    controller: 'state2Ctrl'
  })
  .state('app.state2.detail', {
    ...
    templateUrl: <path to template>
    controller: 'state2DetailsCtrl'
  })
  .state('app.state3', {
    abstract: true,
    ...
  })
  .state('app.state3.tab1', {
    ...
  })
  .state('app.state3.tab2', {
    ...
  })
  .state('app.state4', {
    ...
  })

appState 服务定义如下：

app.factory('appState', [ '$q', 'dataStore', function ($q, dataStore) {
  var deferred = $q.defer();

  console.log("----- Running appState ------")
  var appState = {
    user: null,
    item1: null,
    item2: null,
    item3: null
  };

  var userPromise = dataStore.getUser();
  userPromise.then( function (userIn) {
    appState.item1 = userIn;
    setItem1();
    updateItem2();
    updateItem3();

    // This resolves deferred.promise to the initialised appState.
    deferred.resolve(appState);
  });

  return deferred.promise;
}]);

我定义了一个指令如下：

app.directive('myDirective', [ 'appState', function (appState) {

  console.log("------- My Directive --------");

  console.log("appState: " + JSON.stringify(appState));

  return function (scope, element, attrs) {

  // Do stuff

  }
}]);

该指令作为状态“app.state2.detail”的模板中的属性应用：

<div ng-hide="id == null" my-directive="data" class="tab-content"></div>

我能够将 appState 注入我的任何控制器并访问 appState 中的属性。但是，当我将 appState 注入到我的指令中时，如图所示，它是一个空对象，即指令中的 {}，我无法访问应该在其中的属性。

为了解决这个问题，我将 appState 注入到我的顶级控制器范围中，以便它向下继承到 state2DetailsCtrl 的范围。然后我通过 scope['appState'] 在指令中访问它，然后我可以按预期访问 appState 属性。但是，我原以为我可以将 appState 注入指令中？

当我将 appState 注入指令时，为什么它是一个空对象 {}？您如何将工厂/服务注入指令中？

4

1 回答 1

0

您的问题是您将承诺用于异步操作，但您将其视为同步操作。

当您访问 appState 并创建它时，它正在创建一个需要由 userPromise 方法解决的承诺。这意味着任何依赖 appState 的东西也需要等待该解决方案。

您的指令代码应该这样做：

app.directive(
  'myDirective',
  ['appState', function (appState) {

    console.log("------- My Directive --------");
    appState.then(function (appStateResolve) {
      console.log("appState: " + JSON.stringify(appStateResolve));
    });

    return function (scope, element, attrs) {
      // Do stuff
    };

  }]
);

这是您处理任何异步操作或任何等待数据显示的操作的典型方式。

于 2014-08-01T17:44:39.637 回答