无法使用 ui-router 在角度指令中访问 $state.current.data答案

【问题标题】：Can't access $state.current.data in angular directive with ui-router无法使用 ui-router 在角度指令中访问 $state.current.data
【发布时间】：2014-12-10 22:25:12
【问题描述】：

我正在尝试将一些 $state 数据注入指令中。我有：

.state 'appStorefront',
  url: '/app/storefront'
  templateUrl: 'partials/app/catalog.html'
  controller: 'appCatalogCtrl'
  data:
    pageTitle: 'my page'
    offscreenCategory: 'Storefront'

然后在我的index.html 中，我可以抓住pageTitle 就好了，但是offscreenCategory 会造成问题：

<head>
  <!-- works fine -->
  <meta name="description" content="{{ $state.current.data.pageDescription }}">
  ...
</head>
<body>
  <!-- doesn't work -->
  <e-offscreen offscreenCategory="{{ $state.current.data.offscreenCategory }}"></e-offscreen>
</body>

我正在尝试在指令中选择offscreenCategory，如下所示：

module.directive "eOffscreen", ($state) ->
  templateUrl: 'components/e-offscreen/e-offscreen.html'
  restrict: 'E'
  scope:
    offscreenCategory: '='
  link: (scope, ele, attrs) ->
    console.log $state.current.data.offscreenCategory # undefined

    console.log scope.offscreenCategory # undefined

    scope.$watch 'offscreenCategory', (newVal, oldVal) -> 
      console.log newVal # never runs

如何在指令中访问$state.current.data？

我查看了this similar question，但这似乎不适用于我的情况。

【问题讨论】：

属性名不应该是offscreen-category，即<e-offscreen offscreen-category="{{ ... }}"吗？

标签： angularjs angularjs-directive coffeescript angular-ui-router

【解决方案1】：

我不完全确定，但我认为它可能很简单......

<e-offscreen offscreen-category="{{ ... }}"></e-offscreen>

原因是角度指令属性以与指令名称相同的方式进行规范化。来自docs

注意：指令的scope 选项中的这些=attr 属性被规范化，就像指令名称一样。要绑定到<div bind-to-this="thing"> 中的属性，您需要指定=bindToThis 的绑定。

【讨论】：