Question

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>

模板是

<!-- 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>

navigation.charts已正确初始化为false，因此li＆gt; ul是隐藏的。单击顶级li项会更新导航对象，但视图不会更新。我期待李＆gt;要显示的ul元素。

Plunkr：https://plnkr.co/edit/UJpdFErwVUzsCd65hlW0?p=preview

Answer 1

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

<li ng-init="navigation.charts = false" 
    ng-click="$event.preventDefault(); click('charts')">

Answer 2

您实际上可以添加 href =＆＃34; javascript：void（0）＆＃34;

<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>

这实际上是因为你把href =＆＃34;＃＆＃34;我认为刷新页面。

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

2 个答案: