angularjs - ディレクティブに注入されたAngular ui-router factory/serviceが空です

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 が空のオブジェクト {} になるのはなぜですか? ファクトリ/サービスをどのようにディレクティブに挿入しますか?