控制器中調度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> ~~~