Angularjs 指令中的模型更新不更新视图

用作

angular.module('myApp')
  .component('sideNav', {
    controller: function SideNavController($scope) {
    $scope.navigation = {};
    $scope.click = function(key) {
      $scope.navigation[key] = !$scope.navigation[key];
    }
  },
  templateUrl: 'components/side-nav/side-nav.html',
})

模板是

<side-nav></side-nav>

navigation.charts被正确初始化为false，因此li>ul被隐藏。单击顶级li项目会更新导航对象，但视图不会更新。我希望li>ul元素能够显示出来

---

Plunkr:

单击链接可重新加载页面并重新初始化指令。尝试修改以：

<!-- other li items -->
<li ng-init="navigation.charts = false" 
  ng-click="click('charts')">
  <a href="#">
    <i class="fa fa-bar-chart-o fa-fw"></i> 
      Charts {{ navigation.charts }}
      <span class="fa arrow"></span>
  </a>
  <ul class="nav nav-second-level"
    ng-show="navigation.charts">
    <li>
      <a href="charts.html">Charts</a>
    </li>
    <li>
      <a href="graphs.html">Graphs</a>
    </li>
  </ul>
</li>

单击链接可重新加载页面并重新初始化指令。尝试修改以：

<!-- other li items -->
<li ng-init="navigation.charts = false" 
  ng-click="click('charts')">
  <a href="#">
    <i class="fa fa-bar-chart-o fa-fw"></i> 
      Charts {{ navigation.charts }}
      <span class="fa arrow"></span>
  </a>
  <ul class="nav nav-second-level"
    ng-show="navigation.charts">
    <li>
      <a href="charts.html">Charts</a>
    </li>
    <li>
      <a href="graphs.html">Graphs</a>
    </li>
  </ul>
</li>

您实际上可以添加href=“javascript:void（0）”

---

这实际上是在您放置href=“#”时发生的，我认为这会刷新页面。

您可以实际添加href=“javascript:void（0）”

---

这实际上是在您放置href=“#”时发生的，我认为这会刷新页面。

创建一个演示，重现problemtry

$timeout（function（）{$scope.$apply（）}）

@charlietfl这里是一个plunkr创建一个演示，重现problemtry

$timeout（function（）{$scope.$apply（）}）

@charlietfl这里是一个有效的plunkr。谢谢为什么点击链接会重新激活指令？如果我取出ng init并初始化指令控制器中的值会更好吗？我相信这是因为路由配置。单击

将哈希更改为#，这是一个路由“导航离开”事件。路由器没有它的映射，在销毁并重新初始化后，转到

或
，即现有视图。这样做有效。谢谢为什么点击链接会重新激活指令？如果我取出ng init并初始化指令控制器中的值会更好吗？我相信这是因为路由配置。单击
将哈希更改为#，这是一个路由“导航离开”事件。路由器没有它的映射，在销毁并重新初始化后转到
或
，即现有视图。谢谢。这确实是问题所在。我可以完全删除href吗？如果不需要，您可以删除一个标记，然后添加一些css以提供文本悬停。一旦删除href标记。它不会显示任何悬停效果。谢谢。这确实是问题所在。我可以完全删除href吗？如果不需要，您可以删除一个标记，然后添加一些css以提供文本悬停。一旦删除href标记。它不会显示任何悬停效果。
<ul>
 <li ng-click="click('charts')">
  <a href="javascript:void(0)">
  <i class="fa fa-bar-chart-o fa-fw"></i> 
    Charts {{ navigation.charts }}
    <span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level"
  ng-show="navigation.charts">
  <li>
    <a href="charts.html">Charts</a>
  </li>
  <li>
    <a href="graphs.html">Graphs</a>
  </li>
</ul>