1

部分ビューが AngularJS にロードされた後に DOM の操作をトリガーするにはどうすればよいですか?

jQuery を使用していた場合、次のことができます。

$(document).ready(function(){
    // do stuff here
}

しかし、Angular では、特に部分的なビューを使用する場合、どのようにすればよいでしょうか? より具体的な例として、次の基本的な非対話型 Angular アプリ (同じページ ソースに html と js) があります。

http://cssquirrel.com/testcases/ang-demo/

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Angular Question</title>
</head>
<body data-ng-app="demoApp">
    <div data-ng-view=""></div>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    <script>
        var app = angular.module('demoApp', []);

        var controller = {
            demoController: function ($scope, demoFactory) {
                $scope.fruits = demoFactory.getFruits();
            }
        };

        var factory = {
            demoFactory: function () {
                var fruits = ['apples', 'bananas', 'cherries'];
                var factory = {
                    getFruits: function () {
                        return fruits;
                    }
                };
                return factory;
            }
        }

        function appRoute($routeProvider) {
            $routeProvider
                .when('/step-1',
                    {
                        controller: 'demoController',
                        templateUrl: 'partial.html'
                    })
                .otherwise({ redirectTo: '/step-1' });
        };


        app.config(appRoute);
        app.factory(factory);
        app.controller(controller);

    </script>
</body>
</html>

次の部分があります。

http://cssquirrel.com/testcases/ang-demo/partial.html

<ul>
    <li data-ng-repeat="fruit in fruits">{{fruit}}</li>
</ul>

では、この基本的なアプリで、部分ビューの読み込みが完了した後にリストの最初のリスト項目に「アクティブ」なクラスを追加したい場合、どうすればよいでしょうか?

4

3 に答える 3

3

DOM 操作の観点から考えるのをやめなければなりません。アクティブな最初の LI ではなく、選択された最初のフルーツです。

まず、選択されている果物の概念をサポートします

var fruits = [
  { name: 'apples', active: true },
  { name: 'bananas', active: false },
  { name: 'cherries', active: false }
]

次に、Angular テンプレートで ng-class を使用してその属性をサポートします。

<ul>
    <li data-ng-repeat="fruit in fruits" ng-class="{ active: fruit.active }">{{fruit.name}}</li>
</ul>

これで、果物の配列を操作して、選択するものを変更できます。次に例を示します。

$scope.fruits[2].active = true;
于 2013-08-26T21:58:14.097 に答える
1

AngularJS はモデル主導型です。DOM を変更する場合は、代わりにデータを変更してください。

プロパティを使用$firstして、リピーターの最初のアイテムをアクティブにすることができます。

<ul>
    <li ng-class="{active : $first}" data-ng-repeat="fruit in fruits">{{fruit}}</li>
</ul>

または、リピーターの任意のアイテムをクリックして手動でアクティブ化する場合は、モデル オブジェクトのアクティブ化フィールドを変更できます。

<ul>
    <li ng-class="{true: 'active', false: ''}[fruit.active]" ng-repeat="fruit in fruits" ng-click="activate(fruit)">{{fruit.name}}</li>
</ul>

このデータ構造を使用

var factory = {
    demoFactory: function () {
        var fruits = [{
            name: 'apples',
            active: true
        }, {
            name: 'bananas',
            active: false
        }, {
            name: 'cherries',
            active: false
        }]
        var factory = {
            getFruits: function () {
                return fruits;
            }
        };
        return factory;
    }
}

そして、これをコントローラーに追加します。

$scope.activate = function (fruit) {
    console.log(fruit)
    fruit.active = true;
}

DEMO

于 2013-08-26T21:55:58.643 に答える
-2

そのモデルにアクティブなプロパティを設定し、それをすべての要素に追加することを確認します。

var controller = {
    demoController: function ($scope, demoFactory) {
        $scope.fruits = demoFactory.getFruits();
        $scope.fruits[0].isActive = true; // kinda hacky
    }
};

<ul>
    <li data-ng-repeat="fruit in fruits" ng-class="{ active: fruit.isActive }}">{{fruit}}</li>
</ul>

これは私のやり方ではありませんが、angular では、モデルを編集して、アプリケーションの状態の 1 つの明確な表現を維持することが常に最善です。

于 2013-08-26T21:58:00.607 に答える