控制器中调度window对象和document对象 · angular

[TOC] ## Angular控制器中调用window对象 * 要想使用window对象，那么在angular里面需要在控制器中注入$window #### 项目目录 ![](https://box.kancloud.cn/2016-09-08_57d062fcf0feb.png) #### app.js ~~~js //创建模块 angular.module('myapp',[]); ~~~ #### index.js ~~~js //创建控制器c1 angular.module('myapp').controller('c1', ['$window','$scope', function ($window, $scope) { $scope.b1=function () { //使用window对象 //千万不要直接alert('你好'); //angular中修改了window对象 $window.alert('你好'); }; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1"> <button ng-click="b1()">点击</button> </div> </body> </html> ~~~ ## Angular控制器中调用document对象 * 要想使用window对象，那么在angular里面需要在控制器中注入$document #### 项目目录 ![](https://box.kancloud.cn/2016-09-08_57d062fcf0feb.png) #### app.js ~~~js //创建模块 angular.module('myapp',[]); ~~~ #### index.js ~~~js //创建控制器c1 angular.module('myapp').controller('c1', ['$document','$scope', function ($document,$scope) { $scope.b1=function () { //这里$document对象是一个数组，并且里面只有一个元素，第一元素就是原生的document对象 //这里需要注意$document是数组，而$window是对象 var h1=$document[0].getElementById('h1'); //开始操作dom，但是angular并不希望我们这么做,因为这样又回到了古代 h1.innerHTML='我的天呀'; }; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1"> <h1 id="h1"></h1> <button ng-click="b1()">点击</button> </div> </body> </html> ~~~ ## Angular中使用jquery功能 * 首先这个是不提倡的，但是angular还是保留了jquery功能 * angular中提供了一个jqlite来完成jQuery的某些功能。 * angular使用angular.element()方法来转变成jquery对象 #### index.js ~~~js /** * Created by sks on 2016/9/8. */ angular.module('myapp').controller('c1', ['$document','$scope', function ($document,$scope) { $scope.b1=function () { //angular.element()可不支持选择器 //但是jquery的选择器大多都来源于document.querySelector()方法 //因此可以利用$document[0]找到原生的document然后在利用原生的querySelector()方法定位dom元素 //angular.element()返回的对象为jquery对象了 angular.element($document[0].querySelector('#h1')).text('xxxxxxxxxxxxxxx'); //Angular's jqLite也就是支持的jquery方法为以下一些 // addClass() // after() // append() // attr() // bind() - Does not support namespaces, selectors or eventData // children() - Does not support selectors // clone() // contents() // css() // data() // empty() // eq() // find() - Limited to lookups by tag name // hasClass() // html() // next() - Does not support selectors // on() - Does not support namespaces, selectors or eventData // off() - Does not support namespaces or selectors // one() - Does not support namespaces or selectors // parent() - Does not support selectors // prepend() // prop() // ready() // remove() // removeAttr() // removeClass() // removeData() // replaceWith() // text() // toggleClass() // triggerHandler() - Passes a dummy event object to handlers. // unbind() - Does not support namespaces // val() // wrap() }; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1 id="h1"></h1> <button ng-click="b1()">点击</button> </div> </body> </html> ~~~