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 }
]

然后,在您的角度模板中使用 ng-class 支持该属性:

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

现在您可以操作您的 fruits 数组并更改选择了哪一个,例如:

$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 回答