用AngularJS開發的過程中如何查看Scope內容


scope的繼承就好比JS的原型鏈繼承,深入理解Scope:http://www.lovelucy.info/understanding-scopes-in-angularjs.html

通過查看官網文檔:http://docs.angularjs.cn/guide/scope(這個鏈接不知道為什么直接點擊會顯示Not Found,首先訪問http://docs.angularjs.cn/api,點擊導航欄的“英文文檔”在下拉菜單中選擇“Developer Guide”,左邊導航欄中選擇“Scopes”即可)

對scope有了一定的新的認識,當我們在瀏覽器查看頁面源碼的時候會發現有很多的 class="ng-scope",實際上每個ng-scope就標志着一個新的scope的開始(包含ng-app的元素的ng-scope表示rootScope),可以通過鼠標左鍵單擊該元素,如:

 

然后在console欄輸入:angular.element($0).scope(),就可以查看選中元素的scope的內容,如

在console欄內輸入$0返回你選中的Dom element,如

在沒有引入JQuery的情況下,angular.element()API通過括號內的DOM element(可通過document.getElementById函數等獲取)或者HTML字符串(如<div>lalala</div>)方式將得到的DOM element,返回為JQuery對象,該對象內提供了一系列方法,如bind()綁定事件等等,詳見:http://docs.angularjs.cn/api/ng/function/angular.element

 

更新:

在瀏覽器地址欄輸入:http://docs.angularjs.cn/guide/scope 顯示Not Found的原因:

參考http://www.tuicool.com/articles/7NnUFr2

概要:

官方文檔是用AngularJS寫的,一般來說AngularJS單頁面應用的鏈接帶有"#"號,如:“http://localhost:9000/#/login”,用來區別AngularJS管理的路徑還是WebServer管理的路徑,也就是說帶“#”號的路徑表示前端顯示路徑,不帶“#”號的路徑表示后台接口。AngularJS提供了HTML5模式的路由,可以去掉“#”,通過設置$locationProvider.html5Mode(true)就行了。但這樣設置后,如果用戶直接訪問如“http://localhost:9000/#/book”的頁面而不是通過初始頁面跳轉過來,請求先是提交到WebServer,后台路由沒有對應的路由管理所以顯示Not Found,如果通過初始頁面跳轉過來則是AngularJS前端管理的路由。具體解決方法詳見上述鏈接


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM