Question

我有一个使用ui-router的角度应用程序如下：

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注入指令时，为什么appState是一个空对象？如何将工厂/服务注入指令？

Answer 1

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

当您访问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
    };

  }]
);

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

注入指令的angular ui-router工厂/服务是空的

1 个答案: