1

私のjQueryコードは次のようになります:

  $("body").on("click", ".nav-bar", function(e){
    $(".my-nav").addClass("open");
  });

これを角化したい。クラスを持ついくつかの異なるコントローラー/ビューがある.nav-barため、ディレクティブを使用する必要があると確信しています。どうすればいいのかわかりません。理想的には、すべての jQuery を取り除くことができます。

ありがとう

4

2 に答える 2

4

ディレクティブを作成します。

.directive("navbarAction", function() {
    return {
        restrict: 'A', //<---Look up what this does, there are other options
        link: function(scope, elem, attrs) {
            //Using jQuery
            $(elem).click(function() {
                $(".my-nav").addClass("open");
            });
        }
    }
});

次に、.nav-bar要素に属性を追加しnavbar-actionます。

サンプル：

<input type='button' value='Click me!' navbar-action />

Angular には jqLit​​e (ご想像のとおり、jQuery の軽量バージョン) も付属しているため、jQuery ライブラリ全体をインポートする前に、jqLit​​e で必要なことを達成できるかどうかを確認してください。

于 2013-09-25T15:41:04.890 に答える
1

angular では、通常、アクションに基づいてクラスを追加するのではなく、アプリのステータスに基づいてクラスを追加します。たとえば、リスト内の多数のアイテムから 1 つを選択した場合、その selected 属性を「true」に変更できます。

例えば：

$scope.items = [{id: 1, name: "test", selected: false}, {id: 2, name: "test 2", selected: true}, {id: 3, name: "test 3", selected: false}]

次に、テンプレートで ng-class を使用して、angular がクラスの変更を処理できるようにします。

<ul>
  <li ng-repeat="item in items" ng-class="{ selected: item.selected }">{{item.name}}</li>
</ul>

あなたのナビゲーションバーの場合、私は実際にあなたのアプリの状態について考えます。このナビゲーション バーは、アプリ内の現在の場所を反映していますか? その場合は、 $routeParams (または優れたui-routerを使用している場合は $stateParams ) のチェックを開始し、その方法で条件付きでクラスを追加する必要があります。

ここでのポイントは、アプリの angular-fying は、jQuery アクションの移植以上のものであるということです。それは、よりスマートなアプリを構築することです。

于 2013-09-25T15:44:17.320 に答える