程序猿進(jìn)化日-AngularJS學(xué)習(xí)之表達(dá)式

AngualrJS是一個(gè)Javascript的一個(gè)框架,極大的簡(jiǎn)化了javascript的語(yǔ)法壮吩,符合現(xiàn)在軟件設(shè)計(jì)模式-MVC(路由-服務(wù))进苍,并且通過(guò)指令來(lái)擴(kuò)展了HTML加缘,還可以通過(guò)自己表達(dá)式來(lái)綁定數(shù)據(jù)。接下來(lái)觉啊,是我學(xué)習(xí)AngularJS幾個(gè)月遇到的難點(diǎn)解析拣宏。

表達(dá)式-$parse

表達(dá)式在AngualrJS應(yīng)用中被廣泛的使用,深入理解它是作為開(kāi)發(fā)的關(guān)鍵之一杠人。

首先勋乾,我們先構(gòu)造一個(gè)前端代碼。寫(xiě)一個(gè)text文本框嗡善,然后給其綁定一個(gè)屬性名expr辑莫。

<div ng-controller="firstController">

<input type="text" ng-model="expr" placeholder="Enter an expression"/>

<div>{{parsedExpr}}</div>

</div>

接下來(lái),我們創(chuàng)建script罩引。我們通過(guò)$watch服務(wù)各吨,監(jiān)聽(tīng)我們輸入框中的新舊值,其中袁铐,當(dāng)新舊值不同的時(shí)候揭蜒,我們運(yùn)用$parse服務(wù)將新值解析到我們的parseFun函數(shù)上,然后通過(guò)parseFun函數(shù)調(diào)用scope對(duì)象剔桨,這樣屉更,我們就可以解析我們輸入框中的表達(dá)式,達(dá)到我們想要的結(jié)果洒缀。(注意瑰谜,$parse服務(wù)綁定后將表達(dá)式解析為一個(gè)函數(shù)).

.controller('MyController',function($scope,$parse){

$scope.$watch('expr',function(newVal,oldVar,scope){

console.log('newVar'+newVal);

console.log('oldVar'+oldVar);

if(newVal != oldVar){

var parseFun= $parse(newVal);

scope.parsedExpr=parseFun(scope);

}

});

});

});

}]);

總結(jié):AngualrJS 通過(guò)$parse服務(wù)來(lái)進(jìn)行表達(dá)式的運(yùn)算,這個(gè)服務(wù)能夠訪問(wèn)當(dāng)前所處的作用域树绩。這個(gè)過(guò)程中允許我們?cè)L問(wèn)定義在$scope上的原始Javascript的數(shù)據(jù)與函數(shù)似舵。


表達(dá)式-$interpolate

$interpolate作用非常強(qiáng)大。

例如葱峡,在AngualrJS里面,我們可以直接將DOM當(dāng)做模板來(lái)使用龙助,

<div>My name is {{name}} </div>

我們可以直接使用scope在控制器中獲取name的值砰奕。那么,如果不是在DOM預(yù)先生成的情況提鸟,而是我們需要將生成的字符串當(dāng)成模板來(lái)進(jìn)行改變的時(shí)候军援,我們就會(huì)用到$interpolate了。

首先称勋,我們創(chuàng)建如下所示的視圖胸哥,第一個(gè)視圖代表我們的輸入的名稱,第二個(gè)是一個(gè)文本框赡鲜,代表我們的email的內(nèi)容空厌,并且各自綁定其屬性庐船,最后,通過(guò)我們的<pre>標(biāo)簽來(lái)查找嘲更。

<div ng-controller="secondCtrl">

<input type="email" ng-model="to" placeholder="Recipient"/>

<textarea ng-model="emailBody"></textarea>

<pre>{{previewText}}</pre>

<div>

下面筐钟,我們通過(guò)script來(lái)構(gòu)建我們的$interpolate。該script中赋朦,我們首先將兩個(gè)text關(guān)聯(lián)的屬性給賦值篓冲,通過(guò)$watch監(jiān)聽(tīng)我們emailBody里面的值是否有所變化,如果我們的emailBody變化了宠哄,那么壹将,我們則會(huì)通過(guò)$interpolate來(lái)通過(guò)emailBody的內(nèi)容作為模板,通過(guò)次模板中綁定的屬性的{{to}}來(lái)對(duì)整個(gè)scope進(jìn)行改變毛嫉。最后將其值賦值給我們的previewText顯示出來(lái)诽俯。

<script>

angular.module('myApp',[])

? .controller('secondCtrl',function($scope,$interpolate){

?? $scope.to = '232423@qq.com';

?? $scope.emailBody = 'Hello {{to}},\n\nMy name is Aril';

?? $scope.$watch('emailBody',function(body){? ? ?? ??

?????? if(body){

???? var template = $interpolate(body);

????? $scope.previewText = template({to:$scope.to});

}

});

}); </script>

總結(jié): 從上述的操作上,我們可以在DOM沒(méi)有規(guī)定之前狱庇,來(lái)對(duì)我們事后定義的DOM進(jìn)行操作惊畏,這樣,我們就可以直接使用我們位置的模板進(jìn)行定義賦值了密任。

那么颜启,更進(jìn)一步,如果我們的文件里面包含很多的{{}}浪讳,可能使我們綁定的內(nèi)容導(dǎo)致混淆缰盏,所以,我們可以自定義我們認(rèn)識(shí)的表示淹遵,這樣口猜,我們必須自己重新配置一下系統(tǒng)的$interpolate服務(wù),用startSymbol()方法修改標(biāo)志開(kāi)始的符號(hào)---startSymbol()修改標(biāo)識(shí)開(kāi)始的符號(hào)透揣,endSymbol修改結(jié)束標(biāo)志的符號(hào)济炎。

如下所示,我們修改previewText辐真。

<pre>__previewText__</pre>

隨后须尚,我們通過(guò)重寫(xiě)服務(wù)的方式:

angular.module('emailParser', [])

.config(['$interpolateProvider', function($interpolateProvider) {

$interpolateProvider.startSymbol('__');

$interpolateProvider.endSymbol('__');

}])

.factory('EmailParser', ['$interpolate', function($interpolate) {

return {

parse: function(text, context) {

var template = $interpolate(text);

return template(context);

}

};

}]);

隨后注入

angular.module('myApp', ['emailParser'])

.controller('MyController', ['$scope', 'EmailParser',

function($scope, EmailParser) {

$scope.$watch('emailBody', function(body) {

if (body) {

$scope.previewText = EmailParser.parse(body, {

to: $scope.to

});

}

});

}]);

現(xiàn)在,我們就通過(guò)自己修改的"__XXX__"來(lái)實(shí)現(xiàn)了最終的結(jié)果侍咱。是不是很cool耐床。


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市楔脯,隨后出現(xiàn)的幾起案子撩轰,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件堪嫂,死亡現(xiàn)場(chǎng)離奇詭異偎箫,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)溉苛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)镜廉,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人愚战,你說(shuō)我怎么就攤上這事娇唯。” “怎么了寂玲?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵塔插,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我拓哟,道長(zhǎng)想许,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任断序,我火速辦了婚禮流纹,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘违诗。我一直安慰自己漱凝,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布诸迟。 她就那樣靜靜地躺著茸炒,像睡著了一般。 火紅的嫁衣襯著肌膚如雪阵苇。 梳的紋絲不亂的頭發(fā)上壁公,一...
    開(kāi)封第一講書(shū)人閱讀 52,549評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音绅项,去河邊找鬼紊册。 笑死,一個(gè)胖子當(dāng)著我的面吹牛快耿,可吹牛的內(nèi)容都是我干的囊陡。 我是一名探鬼主播,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼润努,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了示括?” 一聲冷哼從身側(cè)響起铺浇,我...
    開(kāi)封第一講書(shū)人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎垛膝,沒(méi)想到半個(gè)月后鳍侣,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體丁稀,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年倚聚,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了线衫。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡惑折,死狀恐怖授账,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情惨驶,我是刑警寧澤白热,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站粗卜,受9級(jí)特大地震影響屋确,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜续扔,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一攻臀、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧纱昧,春花似錦刨啸、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至存璃,卻和暖如春仑荐,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背纵东。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工粘招, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人偎球。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓洒扎,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親衰絮。 傳聞我的和親對(duì)象是個(gè)殘疾皇子袍冷,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開(kāi)發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見(jiàn)模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)猫牡,斷路器胡诗,智...
    卡卡羅2017閱讀 134,714評(píng)論 18 139
  • Angular面試題 一、ng-show/ng-hide與ng-if的區(qū)別? 第一點(diǎn)區(qū)別是煌恢,ng-if在后面表達(dá)式...
    w_zhuan閱讀 5,533評(píng)論 0 26
  • title: 看書(shū)總結(jié)之AngularJS權(quán)威教程 第一章 初始AngularJS 1.瀏覽器是如何獲取網(wǎng)頁(yè)的 當(dāng)...
    曹小琳琳閱讀 938評(píng)論 0 6
  • ###表達(dá)式 {{ expression }} 特性: * 所有的表達(dá)式都在其所屬的作用域內(nèi)部執(zhí)行骇陈,并有訪問(wèn)本地$...
    84fb4814a265閱讀 250評(píng)論 0 1
  • 目前共享單車(chē)的競(jìng)爭(zhēng)如火如荼二汛,各大公司紛紛殺入市場(chǎng)婿崭,鑒于上海共享單車(chē)的品種越來(lái)越多,網(wǎng)友戲稱“共享單車(chē)已經(jīng)湊齊...
    歸零求一閱讀 352評(píng)論 0 2