13

私はAngular.jsを学んでいますが、一見簡単だと思いました。：P。しかし、私はここで立ち往生しています。私が望むのは、 <.a> (アンカー) タグに別のクラスを追加することです。

私のHTMLコード:

<a href="#/services" title="Services" class="scroll">
<a href="#/portfolio" title="Portfolio" class="scroll">

サービスリンクをクリックすると、「有効な」クラスが追加されると言います

<a href="#/services" title="Services" class="scroll enabled">
<a href="#/portfolio" title="Portfolio" class="scroll">

次に、ポートフォリオ リンクをクリックすると、「有効な」クラスも追加され、サービス アンカー タグから有効なクラスが削除されます

<a href="#/services" title="Services" class="scroll">
<a href="#/portfolio" title="Portfolio" class="scroll enabled">

これを達成するための最良の方法は何ですか？ng-click と ng-class について読んでください。また、ng-class は三項演算子をサポートしていますか? 彼らのドキュメントはそれについて何も言っていません。リンク

4

3 に答える 3

13

私もAngularから始めています。同様のケースでディレクティブを使用しています。これをチェックしてください：

yourApp.directive('scroll', function () {        
    return {
    restrict : 'C',
        link: function(scope, element) {
            element.bind("click" , function(e){
                 $("a").removeClass("enabled"); // Here we need jQuery
                 element.addClass("enabled");
            });     
        }
    }
});


更新 万歳、jQueryなしで解決策を見つけました! elementのclickハンドラは次のようになります。

element.bind("click" , function(e){
   element.parent().find("a").removeClass("enabled"); // Vanilla jqLite!
   element.addClass("enabled");
});

プランカー: http://plnkr.co/edit/jw16wW

于 2013-08-05T10:51:39.727 に答える
1

この方法で試してみてください

    <a href="#/services" title="Services" ng-class="{active: $route.current.activeTab == 'services'}>
    <a href="#/portfolio" title="Portfolio" ng-class="{active: $route.current.activeTab == 'portfolio'}>

and in the app.js
inject the route service like this
    angular.module('myModel',[]).
    config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/services', {
                            templateUrl: 'my.tpl',
                            controller:,,myCtrl,
                            activeTab:  "services"
                        }). 
                       when('/portfolio', {
                            templateUrl: 'my2.tpl',
                            controller: myCtrl2,
                            activeTab:  "portfolio"
                        })
    });

「activeTab」は自己定義変数であり、それに依存して ng-class が表示されます。

于 2013-08-05T10:50:42.573 に答える