AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法
本文實(shí)例講述了AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法。分享給大家供大家參考,具體如下:
之前的文章《AngularJS入門示例之Hello World詳解》,很簡單的就實(shí)現(xiàn)了模型數(shù)據(jù)和頁面顯示的自動綁定。現(xiàn)在我們使用控制器,給模型賦初始值。如果使用jQuery來實(shí)現(xiàn)變量賦初值,需要在頁面加載完成后執(zhí)行
$("#target").attr("value",selfValue);
使用AngularJS代碼如下:
<!doctype html> <html lang="en" ng-app> <head> <meta charset="utf-8"> <title>Hello,World!</title> <script src="angular1.2.25.js"></script> <script> function WholeController($scope) { $scope.yourName = "aty"; } </script> </head> <body ng-controller="WholeController"> <input type="text" ng-model="yourName"> <h1>Hello, {{yourName}}</h1> </body> </html>
這里需要注意:函數(shù)名必須與ng-controller中的名稱一致,函數(shù)的參數(shù)$scope名次也是固定的,不能隨便修改。這樣的話,AngularJS框架會自動執(zhí)行我們的控制器,并將作用域?qū)ο笞⑷氲胶瘮?shù)參數(shù)。很顯然這種方式非常不好,因?yàn)椴荒芨淖兒瘮?shù)參數(shù)名,后面我會看到還有別的方式來達(dá)到同樣的目的,后續(xù)我們再繼續(xù)學(xué)習(xí)??梢钥吹紺ontroller就是一個(gè)JavaScript 函數(shù),在 Angular 里,當(dāng)這個(gè)函數(shù)通過 ng-controller 指令綁定到 DOM 上的時(shí)候,這個(gè)函數(shù)就是 Controller 了,我們可以為 Controller Scope 對象。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
- AngularJS控制器controller正確的通信的方法
- AngularJs學(xué)習(xí)第五篇從Controller控制器談?wù)?scope作用域
- 詳解Angularjs在控制器(controller.js)中使用過濾器($filter)格式化日期/時(shí)間實(shí)例
- AngularJS 控制器 controller的詳解
- AngularJS利用Controller完成URL跳轉(zhuǎn)
- Angularjs中controller的三種寫法分享
- angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載示例
- Angularjs的Controller間通信機(jī)制實(shí)例分析
- AngularJS實(shí)現(xiàn)controller控制器間共享數(shù)據(jù)的方法示例
相關(guān)文章
解決nodejs中使用http請求返回值為html時(shí)亂碼的問題
下面小編就為大家?guī)硪黄鉀Qnodejs中使用http請求返回值為html時(shí)亂碼的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02AngularJS基礎(chǔ) ng-non-bindable 指令詳細(xì)介紹
本文主要講解AngularJS ng-non-bindable 指令,這里幫大家整理了ng-non-bindable指令的基本知識資料,有需要的小伙伴可以參考下2016-08-08詳解Angular結(jié)合zTree異步加載節(jié)點(diǎn)數(shù)據(jù)
本篇文章主要給大家分享了Angular結(jié)合zTree異步加載節(jié)點(diǎn)數(shù)據(jù)的難點(diǎn)以及方法,有這方面需求的朋友參考下吧。2018-01-01詳解如何在Angular應(yīng)用中發(fā)起HTTP?302 redirect
這篇文章主要介紹了如何在Angular應(yīng)用中發(fā)起HTTP 302 redirect詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12Angular中實(shí)現(xiàn)樹形結(jié)構(gòu)視圖實(shí)例代碼
近兩年當(dāng)中使用Angular開發(fā)過很多項(xiàng)目,其中也涉及到一些樹形結(jié)構(gòu)視圖的顯示,最近的在項(xiàng)目中封裝了大量的組件,一些組件也有樹形結(jié)構(gòu)的展示,所以寫出來總結(jié)一下。2017-05-05AngularJS自定義服務(wù)與fliter的混合使用
這篇文章主要介紹了AngularJS自定義服務(wù)與fliter的混合使用的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
這篇文章主要介紹了angularjs實(shí)現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài),涉及AngularJS事件響應(yīng)及頁面table元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02體驗(yàn)jQuery和AngularJS的不同點(diǎn)及AngularJS的迷人之處
AngualrJS是一個(gè)很貼心的web應(yīng)用框架,本篇通過jQuery和Angular兩種方式來實(shí)現(xiàn)同一個(gè)實(shí)例,從而體驗(yàn)兩者的不同點(diǎn)以及AngularJS的迷人之處2016-02-02