Question

我有一个左侧导航，其中有4个子项目以及展开/折叠按钮。当我点击任何子项目时，它会正确呈现与之关联的html页面以及展开/折叠按钮工作正常。但是，只要我多次点击子项目，展开/折叠按钮就会停止运行。

这是代码提取

<div class="sidebar" sidebar-directive="state">
    <a href="" id="navigation-toggle" ng-click="toggleState()">>></a>

    <ul class="navigation">
        <li class="navigation-items">
            <span class="img-responsive" id="allocation"></span><input type="image" src="Images/icon_dbmyallocation.png" ng-click="" /><br /><b>My Allocation</b>
        </li>
        <li class="navigation-items">
            <span class="img-responsive" id="matrix"></span><input type="image" src="Images/icon_dbmytsmatrix.png" ng-click="" /><br /><b>My TS Status</b>
        </li>
        <li class="navigation-items">
            <span class="img-responsive" id="utilization"></span><input type="image" src="Images/icon_dbmyutilization.png" ng-click="" /><br /><b>My Utilization</b>
        </li>
        <li class="navigation-items">
            <span class="img-responsive" id="contacts"></span><input type="image" src="Images/icon_dbcontacts.png" ng-click ="contactsGrid()" /><br /><b>Contacts</b>
        </li>

    </ul>
</div> 


 $scope.state = false; 
 $scope.toggleState = function () {
    $scope.state = !$scope.state;
    var el = document.getElementById("navigation-toggle"); 
    if (el.innerHTML === "&gt;&gt;") {
       el.innerHTML = "&lt;&lt;"; //document.getElementById('navigation-toggle').style.display = 'none'; 
  } else {
     el.innerHTML = "&gt;&gt;"; 
  }
};

Answer 1

我想你应该用插值来做到这一点：

$scope.ltgt = ">>";
$scope.state = false;
$scope.toggleState = function() {
  $scope.state = !$scope.state;
  $scope.ltgt = $scope.state ? "<<" : ">>";
};

现在在视图中：

<a href="" id="navigation-toggle" ng-click="toggleState()">{{ltgt}}</a>

＆＃13;

var app = angular.module('dApp', []);

app.controller('dCtrl', function($scope) {
  $scope.ltgt = ">>";
  $scope.state = false;
  $scope.toggleState = function() {
    $scope.state = !$scope.state;
    $scope.ltgt = $scope.state ? "<<" : ">>";
  };

});

＆＃13;

<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<div ng-app='dApp'>
  <div ng-controller='dCtrl'>
    <div class="sidebar" sidebar-directive="state">
      <a href="" id="navigation-toggle" ng-click="toggleState()">{{ltgt}}</a>

      <ul class="navigation" ng-if="state == false">
        <li class="navigation-items">
          <span class="img-responsive" id="allocation"></span>
          <input type="image" src="Images/icon_dbmyallocation.png" ng-click="" />
          <br /><b>My Allocation</b>
        </li>
        <li class="navigation-items">
          <span class="img-responsive" id="matrix"></span>
          <input type="image" src="Images/icon_dbmytsmatrix.png" ng-click="" />
          <br /><b>My TS Status</b>
        </li>
        <li class="navigation-items">
          <span class="img-responsive" id="utilization"></span>
          <input type="image" src="Images/icon_dbmyutilization.png" ng-click="" />
          <br /><b>My Utilization</b>
        </li>
        <li class="navigation-items">
          <span class="img-responsive" id="contacts"></span>
          <input type="image" src="Images/icon_dbcontacts.png" ng-click="contactsGrid()" />
          <br /><b>Contacts</b>
        </li>

      </ul>
    </div>
  </div>
</div>

＆＃13;

ng-click在左侧导航中无法正常工作

1 个答案: