在 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>
所以,如果在这个基本应用程序中,我想在部分视图完成加载后向列表中的第一个列表项添加一个“活动”类,我该怎么做呢?