AngularJS解決ng界面長表達(dá)式(ui-set)的方法分析
本文實(shí)例講述了AngularJS解決ng界面長表達(dá)式(ui-set)的方法。分享給大家供大家參考,具體如下:
本文來自網(wǎng)友sun shine的問題,問題如下:
您好, 我想求教一個問題.
在$scope中我的對象名字寫的特別深, 在 html中我又多次用到了同一個對象, 對不對在 html中讓它綁定到一個臨時變量呢?
比如:
$scope.this.is.a.very.deep.obj = {
'name': 'xxx',
'state': 'active'};
在 模板中,
{{this.is.a.very.deep.obj.name}}
{{this.is.a.very.deep.obj.state}}
類似于這種, 我能否把 this.is.a.very.deep.obj 預(yù)先賦給一個臨時的變量, 然后在 兩個 span中只需 o.name, o.state 就行了呢? 我覺得這樣解析起來是不是快一點(diǎn).
但是我試了, 并沒有成功. 求指點(diǎn).
先謝了.
在這里首先需要說明的是ng界面的所有引用都需要在$scope這個viewmodel(ui和view的膠水層),所以如果我們希望能夠把表達(dá)式變得更可讀,更友好,那么我們就必須在$scope上創(chuàng)建這個變量。
再則對于ng其使用使用的一堆的$watch,實(shí)現(xiàn)臟檢查,如果你理解這些了,那么我們就可以很容易的實(shí)現(xiàn)一套如spring的
<c:set var="xxx" expression="xxx" />
的tag.
對于實(shí)現(xiàn)這類tag,我們最好的方式則是利用ng的directive來實(shí)現(xiàn),代碼如下:
angular.module("greengerong.ui.tag", []) .directive("uiSet", [ function() { return { restrict: "EA", link: function(scope, elm, iAttrs) { scope.$watch(iAttrs.expression, function(val) { scope[iAttrs. var] = val; var apply = !scope.$$phase ? scope.$apply : angular.noop; apply(); }); } }; } ]);
希望本文所述對大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
Angular2使用SVG自定義圖表(條形圖、折線圖)組件示例
這篇文章主要介紹了Angular2使用SVG自定義圖表(條形圖、折線圖)組件,涉及Angular結(jié)合svg進(jìn)行圖表繪制的相關(guān)操作技巧,需要的朋友可以參考下2019-05-05從?Angular?Route?中提前獲取數(shù)據(jù)的方法詳解
這篇文章主要介紹了從?Angular?Route?中提前獲取數(shù)據(jù),通過本文,你將學(xué)會使用?resolver,?在?Angular?App?中應(yīng)用?resolver,應(yīng)用到一個公共的預(yù)加載導(dǎo)航,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07使用AngularJS編寫多選按鈕選中時觸發(fā)指定方法的指令代碼詳解
最近做項(xiàng)目時遇到了需要用到多選按鈕選中觸發(fā)事件的功能,小編試著手寫一個指令,具體實(shí)現(xiàn)代碼大家參考下本文吧2017-07-07詳解angular2如何手動點(diǎn)擊特定元素上的點(diǎn)擊事件
這篇文章主要介紹了詳解angular2如何手動點(diǎn)擊特定元素上的點(diǎn)擊事件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10詳解Angular的雙向數(shù)據(jù)綁定(MV-VM)
本文主要對Angular的雙向數(shù)據(jù)綁定(MV-VM)進(jìn)行實(shí)例分析,具有一定的參考價值,下面跟著小編一起來看下吧2016-12-12angularJS實(shí)現(xiàn)表格部分列展開縮起示例代碼
這篇文章主要介紹了angularJS實(shí)現(xiàn)表格部分列展開縮起示例代碼,代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-09-09angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02解決Angular2 router.navigate刷新頁面的問題
今天小編就為大家分享一篇解決Angular2 router.navigate刷新頁面的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08