AngularJavaScript文档和window函数最佳实践
- 使用$document代替document对象以确保在Angular上下文中使用文档对象。 示例：
angular.module('myApp').controller('myCtrl', function($scope, $document) { var myElement = $document[0].getElementById('myId'); });
- 使用$window代替window对象以确保在Angular上下文中使用window对象。 示例：
angular.module('myApp').controller('myCtrl', function($scope, $window) { $window.alert('Hello World!'); });
- 避免直接使用window和document对象。 示例：
// 错误示例 var myElement = document.getElementById('myId');
// 正确示例 angular.module('myApp').controller('myCtrl', function($scope, $document) { var myElement = $document[0].getElementById('myId'); });
- 通过$timeout服务确保对DOM的更改延迟执行以确保在Angular生命周期内。 示例：
angular.module('myApp').controller('myCtrl', function($scope, $timeout) { $timeout(function() { // 更改DOM }); });
- 使用$scope.$watch监听DOM的更改并相应地更新作用域。 示例：
angular.module('myApp').controller('myCtrl', function($scope) { $scope.myValue = 'Initial Value';
$scope.$watch(function() { return document.getElementById('myId').innerHTML; }, function(newValue, oldValue) { $scope.myValue = newValue; }); });