AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法
本文實(shí)例講述了AngularJS控制器controller給模型數(shù)據(jù)賦初始值的方法。分享給大家供大家參考，具體如下：
之前的文章《AngularJS入門(mén)示例之Hello World詳解》，很簡(jiǎn)單的就實(shí)現(xiàn)了模型數(shù)據(jù)和頁(yè)面顯示的自動(dòng)綁定?，F(xiàn)在我們使用控制器，給模型賦初始值。如果使用jQuery來(lái)實(shí)現(xiàn)變量賦初值，需要在頁(yè)面加載完成后執(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中的名稱(chēng)一致，函數(shù)的參數(shù)$scope名次也是固定的，不能隨便修改。這樣的話，AngularJS框架會(huì)自動(dòng)執(zhí)行我們的控制器，并將作用域?qū)ο笞⑷氲胶瘮?shù)參數(shù)。很顯然這種方式非常不好，因?yàn)椴荒芨淖兒瘮?shù)參數(shù)名，后面我會(huì)看到還有別的方式來(lái)達(dá)到同樣的目的，后續(xù)我們?cè)倮^續(xù)學(xué)習(xí)?？梢钥吹紺ontroller就是一個(gè)JavaScript 函數(shù)，在 Angular 里，當(dāng)這個(gè)函數(shù)通過(guò) ng-controller 指令綁定到 DOM 上的時(shí)候，這個(gè)函數(shù)就是 Controller 了，我們可以為 Controller Scope 對(duì)象。
更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《AngularJS入門(mén)與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
- AngularJS控制器controller正確的通信的方法
- AngularJs學(xué)習(xí)第五篇從Controller控制器談?wù)?scope作用域
- 詳解Angularjs在控制器(controller.js)中使用過(guò)濾器($filter)格式化日期/時(shí)間實(shí)例
- AngularJS 控制器 controller的詳解
- AngularJS利用Controller完成URL跳轉(zhuǎn)
- Angularjs中controller的三種寫(xiě)法分享
- angularJS+requireJS實(shí)現(xiàn)controller及directive的按需加載示例
- Angularjs的Controller間通信機(jī)制實(shí)例分析
- AngularJS實(shí)現(xiàn)controller控制器間共享數(shù)據(jù)的方法示例
相關(guān)文章
Angular實(shí)現(xiàn)響應(yīng)式表單
本篇文章主要介紹了Angular實(shí)現(xiàn)響應(yīng)式表單，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Angularjs中date過(guò)濾器失效的問(wèn)題及解決方法
這篇文章主要介紹了Angularjs中date過(guò)濾器失效的問(wèn)題及解決方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-07-07
本文主要介紹了手動(dòng)初始化Angular的模塊與控制器的方法，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2016-12-12
本篇文章主要主要介紹了angularjs之$timeout指令詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
對(duì)angularJs中2種自定義服務(wù)的實(shí)例講解
今天小編就為大家分享一篇對(duì)angularJs中2種自定義服務(wù)的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Angular刷新當(dāng)前頁(yè)面的實(shí)現(xiàn)方法
這篇文章主要介紹了Angular刷新當(dāng)前頁(yè)面的實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
下面小編就為大家?guī)?lái)一篇基于AngularJS的簡(jiǎn)單使用詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就想給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
AngularJS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a
這篇文章主要介紹了AngularJS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a，然后在文章下面給大家介紹了angularjs頁(yè)面加載后自動(dòng)彈窗的實(shí)例代碼，感興趣的朋友參考下吧2017-08-08
使用Angular 6創(chuàng)建各種動(dòng)畫(huà)效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動(dòng)畫(huà)。我們將通過(guò)本文學(xué)習(xí)到如何使用Angular 6來(lái)創(chuàng)建各種動(dòng)畫(huà)效果。在此，我們將使用Visual Studio Code來(lái)進(jìn)行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
AngularJS點(diǎn)擊添加樣式、點(diǎn)擊變色設(shè)置的實(shí)例代碼
本篇文章主要介紹了AngularJS點(diǎn)擊添加樣式、點(diǎn)擊變色設(shè)置的實(shí)例代碼，具有一定的參考價(jià)值，有興趣的可以了解一下2017-07-07