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耐床。
