在AngularJS中加載部分視圖后，如何觸發DOM的操縱？

Question

在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>

因此，如果在此基本應用程序中，我想在部分視圖加載完成后向列表中的第一個列表項添加“活動”類，該如何處理？

Answer 1

您必須停止對DOM操作的思考。 這不是第一個活動的LI，而是被選擇的第一個水果。

首先，支持選擇水果的概念

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

然后，在您的角度模板中使用ng-class支持該屬性：

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

現在，您可以操縱水果數組並更改選擇的數組，例如：

$scope.fruits[2].active = true;

Answer 2

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

Answer 3

您將在該模型上設置一個活動屬性，並檢查是否將其添加到每個元素。

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>

這不正是我會怎么做，但角度它始終是最好的，讓你保持你的應用程序的狀態，1單明確表示編輯模型。

在AngularJS中加載部分視圖后，如何觸發DOM的操縱？

問題描述

3 個解決方案

解決方案1
3 已采納 2013-08-26 21:58:14

解決方案2
1 2013-08-26 21:55:58

解決方案3
-2 2013-08-26 21:58:00

在AngularJS中加載部分視圖后，如何觸發DOM的操縱？

問題描述

3 個解決方案

解決方案1 3 已采納 2013-08-26 21:58:14

解決方案2 1 2013-08-26 21:55:58

解決方案3 -2 2013-08-26 21:58:00

解決方案1
3 已采納 2013-08-26 21:58:14

解決方案2
1 2013-08-26 21:55:58

解決方案3
-2 2013-08-26 21:58:00