ng-class和ng-click不起作用

Question

我正在嘗試使用AngularJS來創建一個簡單的單擊以加粗效果。我希望不要涉及任何控制器腳本，但包含或不包含，我的代碼不起作用。

我的HTML代碼的角度標記

<div ng-app="organHome"> 
    <dl class="sub-nav" ng-controller="inModalSwitchCtrl"> 
     <dd ng-class="content:bold"><a ng-click="switchContent()" ng-model="content">Contents</a> 
     </dd> 
     <dd ng-class="comment:bold"><a ng-model="comment" ng-click="switchComment()">Comments</a> 
     </dd> 
    </dl> 
</div> 

我的js代碼：

angular.module('organHome', []) 

    .controller('inModalSwitchCtrl', function ($scope) { 
    $scope.content = true; 
    $scope.comment = false; 

    $scope.switchContent = function ($scope) { 
     $scope.content = true; 
     $scope.comment = false; 
    }; 

    $scope.switchComment = function ($scope) { 
     $scope.comment = true; 
     $scope.content = false; 
    }; 
}); 

這裏是小提琴的例子

http://jsfiddle.net/qHkWA/

我知道那一定是很菜鳥這是我的，但我卡住了。任何幫助？

---

我最初的目標是儘量減少我的代碼，希望沒有controller.js。

如果無論如何只用現有的指令去做，我很樂意跟隨！

我的可怕和不工作的做法是這樣的：

<dl class="sub-nav"> 
    <dd ng-class="'active':content"><a ng-click="content = true" ng-model="content">Contents</a></dd> 
    <dd ng-class="'active':comment"><a ng-model="comment">Comments</a></dd> 
</dl> 

Answer 1

在HTML：

<dd ng-class="{'bold':content}"><a ng-click="switchContent()" ng-model="content">Contents</a></dd> 

    <dd ng-class="{'bold':comment}"><a ng-model="comment" ng-click="switchComment()">Comments</a></dd> 

還添加CSS：

.bold {font-weight: bold} 

DEMO

編輯

對於更少的代碼，你可以使用這個：

 <div ng-app="organHome"> 
     <dl class="sub-nav" ng-controller="inModalSwitchCtrl" ng-init="content=true"> 
      <dd ng-class="{'bold':content}"><a ng-click="content=true">Contents</a></dd> 
      <dd ng-class="{'bold': !comment}"><a ng-click="content=false">Comments</a></dd> 
     </dl> 
    </div> 

DEMO

Answer 2

爲納克級的簡化語法是{值：表達式}所以，你的代碼應該是這樣的：

<dd ng-class="{bold:content}"><a ng-click="switchContent()" ng-model="content">Contents</a></dd> 
<dd ng-class="{bold:comment}"><a ng-model="comment" ng-click="switchComment()">Comments</a></dd> 

你也應該選擇「無包裝」。在你的情況下，角度甚至沒有開始。

這裏是工作提琴 - http://jsfiddle.net/qHkWA/3/

也爲更好地瞭解這項工作，你可以看看這個線程 - What is the best way to conditionally apply a class?

而且我不知道是不是適合你的目的，但你可以簡化整個使用jQuery的toggleClass你的代碼 - http://jsfiddle.net/8kgMZ/3/：

<dd class="bold"><a ng-click="toggleBold()">Contents</a></dd> 
<dd><a ng-click="toggleBold()">Comments</a></dd> 

和控制器：

.controller('inModalSwitchCtrl', function ($scope) { 
     $scope.toggleBold = function() { 
      angular.element(document).find('dd').toggleClass('bold'); 
     };