Question

我的ng-class和ng-click有问题。我想在按钮点击时将div添加到div，但它不起作用。这是我的代码：

    <header>
    <div id="headerContainer">
        <button ng-click="toggle = !toggle">Toggle</button>
    </div>
</header>

<nav ng-class="{'myClassName' : toggle}"></nav>

奇怪的是什么？当我将ng-class添加到我的按钮时，它会在按钮上切换课程，但我的<nav>仍然没有上课：

<button ng-click="toggle = !toggle" ng-class="{'myClassName' : toggle}">Toggle</button>

如何使其工作以及为什么它不能正常工作？

Answer 1

toggle =！toggle不会修改控制器中的$ scope.toggle。

您需要编写一个控制器方法来修改$ scope.toggle。

背后的原因是你访问的范围不是$ scope.toggle而是它的一个孩子。要修改$ scope.toggle，只能在控制器中执行此操作

Answer 2

请在下面找到工作代码的示例。请参阅@Pierre Emmanuel Lallemant，了解您的代码段不起作用的原因。

var app = angular.module('myApp', [])

app.controller('mainCtrl',['$scope' , function($scope) {
  $scope.toggle = false;

  $scope.changeToggle = function(){
    $scope.toggle = !$scope.toggle;
  }
  
}])

<style>
.myClass{
  color: red;
}
</style>

<div ng-app="myApp" ng-controller="mainCtrl">
  <button ng-click="changeToggle()" ng-class="{'myClass' : toggle}">Toggle</button>
</div>
  

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 3

前面已经提到了，但如果你的toggle变量在另一个范围内声明（更深层嵌套），那么你将无法从导航菜单中访问它

有两种解决方法。您可以在控制器中添加变量（有些人建议这样做），因为它会使变量在顶级已知并且可供所有子范围访问，或者您可以通过使用简单地在外部控制器的元素上初始化/提升它ng-init。

当您只发布部分设置时，真的很难提供帮助，因为错误/问题不在于您发布的内容，而在于未发布的内容：）

Answer 4

这是你的意思吗？

＆＃13;

<div ng-controller="MyCtrl">
  <header>
    <div id="headerContainer">
      <button ng-click="toggle = !toggle">Toggle</button>
    </div>
  </header>

  <nav ng-class="myClassName {{toggle}}"></nav>

</div>

＆＃13;

  CREATE TABLE [dbo].[Table1]([PID] [int] NULL,[ProductDesc] [nvarchar](50) NULL,[ProductCode] [nvarchar](10) NULL) ON [PRIMARY]
    CREATE TABLE [dbo].[Table2]([Date] [varchar](50) NULL,[PID] [int] NULL) ON [PRIMARY]

    ---insert script---
    INSERT [dbo].[Table1] ([PID], [ProductDesc], [ProductCode]) VALUES (1, N'Packet-Eye', N'P001')
    INSERT [dbo].[Table1] ([PID], [ProductDesc], [ProductCode]) VALUES (2, N'Wiggy', N'W099 ')
    INSERT [dbo].[Table1] ([PID], [ProductDesc], [ProductCode]) VALUES (3, N'Wimax-Lite', N'W001')
    INSERT [dbo].[Table1] ([PID], [ProductDesc], [ProductCode]) VALUES (4, N'Wimax-Home', N'e W002 ')
    INSERT [dbo].[Table2] ([Date], [PID]) VALUES (N'1/14/2009 ', 1)
    INSERT [dbo].[Table2] ([Date], [PID]) VALUES (N'1/15/2009 ', 1)
    INSERT [dbo].[Table2] ([Date], [PID]) VALUES (N'2/1/2009', 2)
    INSERT [dbo].[Table2] ([Date], [PID]) VALUES (N'3/3/2009', 3)
    GO
    SELECT *
    FROM
    (
      SELECT t1.productdesc as pd,COUNT(month(t2.date))as dates,
      DateName( month ,  DateAdd( month , MONTH(t2.date) , 0 ) - 1 ) as mon
      FROM table1 t1 inner join table2 t2 on t1.pid=t2.pid
      where year(date) between 2009
        and 2010 group by productdesc,month(t2.date),month (t2.date)
    ) AS D
    PIVOT
    (
    sum(dates)
       FOR mon IN( [January],[February],[March],[April],[May],[June],[July],[August],[September],[October],[November],[December])
    ) AS P

＆＃13;

ng-class和ng-click不能一起工作

4 个答案: