分层Angularjs指令未检索范围变量

Question

我正在构建一个AngularJS应用程序。我使用三个指令来构建菜单。标题在i18n文件中，因此大多数属性都是angularjs表达式。以下是指令的结构片段：

<navbar title="{{ LABELS.HOME }}" inverse="true">
  <mainmenu>
    <menu-item name="system" title="{{ LABELS.SYSTEM }}">
      <submenu name="users" title="{{ LABELS.USERS }}"></submenu>
    </menu-item>
  </mainmenu>
</navbar>

问题出在指令的代码上。在controller函数中（甚至在link函数中），我试图检索title和name属性，但它们总是作为undefined值出现，即使我做了console.dir($scope)，我也可以看到属性

您可以在此处签出代码片段

Answer 1

我将在这里大胆尝试一下，因为您还没有提供任何代码，但这些代码是否在ng-repeat中使用？

如果是这样，那么问题是链接函数实际上是在将值应用于作用域之前调用的。这是因为ng-repeat只为整个循环执行一次链接，然后复制节点，每个节点都应用了正确的$scope。

您可以在控制台中看到这些值的原因是，scope对象在链接函数运行后会更新，但在控制台渲染其输出之前。

这导致了这样一种情况：

$scope == {};
link();
    console.log($scope); // stores reference to be rendered
$scope.foo = 'bar';
renderConsoleOutput();

如果您不能使用标准绑定（例如，$parent.LABELS.SYSTEM或类似的东西）来修复它，您可以将对象访问封装在一个方法中，然后绑定该方法：

// in menu-item directive:
$scope.getLabels = function() { return $scope.LABELS; }

// in menu-item template:
<menu-item title="{{ getLabels().SYSTEM }}">