Question

如果条件为真，我需要让代码工作

if document.getElementByClass('toggle').style.visibility == 'visible'

应该就像在我的页面中写的那样

ng-click="toggle = !toggle"

但是如何在我的javascript文件中选择切换状态？

编辑：更多信息

div(ng-controller='ViewsCtrl', ng-class="toggle ? 'nav-open' : 'nav'")
  .container
    .logo
      img(src='images/logo.png')
      span Motto

    ul(ng-class="toggle ? 'menu-open' : 'menu'")
      li
        a(ng-click="changeView('home')") Home
      li
        a(ng-click="changeView('products')") Products

    button.toggle(ng-click='toggle = !toggle') Menu

控制器

appControllers.controller 'ViewsCtrl', [
  '$scope'
  '$location'

  Ctrl = ($scope, $location) ->

    $scope.changeView = (view) ->
      $location.path view
      if document.getElementByClass('toggle').style.visibility == 'visible'
        $scope.toggle = !toggle
      return

    return

]

Answer 1

看看这个：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <input type="button" ng-click="toggle = !toggle" value="{{toggle?' Hide':' Show'}}"/>
  <div ng-show="toggle">shown</div>
</div>

＆＃13;

Answer 2

如果您想在课程之间切换，则需要使用ng-class。

使用ng-show，如其他答案所述，您实际上不会将元素visibility设置为hidden或visible，而是设置元素样式display到none或inherit。为了设置元素的visibility样式，我建议您声明自己的类并使用ng-class。

＆＃13;

<style>
.not-visible {
	visibility: hidden;
}

.visible {
	visibility: visible;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <input type="button" ng-click="toggle = !toggle" value="{{toggle?' Hide':' Show'}}"/>
  <div ng-class="{'not-visible' : !toggle, visible : toggle}">shown</div>
</div>

＆＃13;

请记住，我们需要围绕类名not-visible的撇号，因为它有一个连字符。您可以阅读ng-class here.

上的文档

Answer 3

您应该在控制器中执行逻辑而不是像ng一样执行ng-click：

$scope.changeView = {
    class: 'menu-closed',
    toggleMenu: function() {
        $scope.changeView.class = ($scope.changeView.class === "menu-closed") ? "menu-open" : "menu-closed";
    }
};

你的HTML将是：

<ul ng-class="changeView.class"></ul>
<button ng-click="changeView.toggleMenu()">toggle menu</button>

这样可以保持HTML的清洁，并将控制器中的所有逻辑保留在应有的位置。

以下是显示上述内容的示例：http://codepen.io/anon/pen/mejjRN

如何通过javascript更改ng-click状态？

3 个答案: