Question

我正在使用UI-Router并尝试使用以下内容从指令中访问我的Web应用程序的当前状态：

footer.directive.js

(function () {
  'use strict';

  angular
    .module('app')
    .directive('myFooter', myFooter);

  myFooter.$inject = ['$cookies', 'userFactory', '$state', '$log', '$rootScope'];

  function myFooter($cookies, userFactory, $state, $log, $rootScope) {
    var directive = {
      restrict: 'E',
      templateUrl: 'app/components/footer/footer.html',
      controller: FooterController,
      controllerAs: 'vm',
      bindToController: true
    };

    return directive;

    function FooterController($state) {
      var vm = this;

      vm.currentState = $state;
    }
  }

})();

footer.html

<div class="footer">
  <p>{{ vm.currentState.current.name }}</p>
</div>

当我运行$log.log($state)时，它会在我的控制台中发布一个对象，该对象的current对象的name属性等于我需要的州名，但是当我尝试要在我的视图中引用$ state.current.name或将其记录到控制台，它将显示为空字符串。

我对Angular有点新意，所以如果有人能向我解释这里发生了什么，或者至少如何解决这个问题，以便我可以正确显示我想要的东西，这将是一个巨大的帮助。谢谢！

编辑：在发布此问题之前我看过的另外两个问题是：

This one这似乎更多地涉及根据州名更改班级名称，以及this one，它并没有完全解决我的问题（并且看起来不像它可能是正确的方法。）

Answer 1

首先，您发布的代码中存在命名错误！（amaiFooter）

第二件事是，如果您记录一个对象，它将被一个引用的调用约束

因此，在您记录它的那一刻，您记录参考。这意味着当你查看它时，它可以包含除记录之外的其他值

但是当您记录状态名称并且未定义时，这是正确的输出！

您可以尝试将其包装在$ timeout函数中，延迟为0，只是为了将代码添加到当前摘要周期的末尾，这应该可以解决您的问题

Answer 2

您需要在控制器上注入状态服务，如下所示

(function () {
  'use strict';

  angular
    .module('app')
    .directive('myFooter', myFooter);

  myFooter.$inject = ['$cookies', 'userFactory', '$state', '$log', '$rootScope'];

  function myFooter($cookies, userFactory, $state, $log, $rootScope) {
    var directive = {
       restrict: 'E',
       templateUrl: 'app/components/footer/footer.html',
       controller: FooterController,
       controllerAs: 'vm',
       bindToController: true
    };

    return directive;
  }

  FooterController.$inject = ['$state'];
  function FooterController($state) {
    var vm = this;

    vm.currentState = $state;
  }

})();

访问指令中的当前状态名称？

2 个答案: