AngularJS解決ng界面長(zhǎng)表達(dá)式(ui-set)的方法分析
本文實(shí)例講述了AngularJS解決ng界面長(zhǎng)表達(dá)式(ui-set)的方法。分享給大家供大家參考，具體如下：
本文來(lái)自網(wǎng)友sun shine的問(wèn)題，問(wèn)題如下：
您好, 我想求教一個(gè)問(wèn)題.
在$scope中我的對(duì)象名字寫(xiě)的特別深, 在 html中我又多次用到了同一個(gè)對(duì)象, 對(duì)不對(duì)在 html中讓它綁定到一個(gè)臨時(shí)變量呢?
比如:
$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}}
類(lèi)似于這種, 我能否把 this.is.a.very.deep.obj 預(yù)先賦給一個(gè)臨時(shí)的變量, 然后在 兩個(gè) span中只需 o.name, o.state 就行了呢? 我覺(jué)得這樣解析起來(lái)是不是快一點(diǎn).
但是我試了, 并沒(méi)有成功. 求指點(diǎn).
先謝了.
在這里首先需要說(shuō)明的是ng界面的所有引用都需要在$scope這個(gè)viewmodel(ui和view的膠水層)，所以如果我們希望能夠把表達(dá)式變得更可讀，更友好，那么我們就必須在$scope上創(chuàng)建這個(gè)變量。
再則對(duì)于ng其使用使用的一堆的$watch，實(shí)現(xiàn)臟檢查，如果你理解這些了，那么我們就可以很容易的實(shí)現(xiàn)一套如spring的
<c:set var="xxx" expression="xxx" />
的tag.
對(duì)于實(shí)現(xiàn)這類(lèi)tag，我們最好的方式則是利用ng的directive來(lái)實(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();
});
}
};
}
]);
希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。
相關(guān)文章
AngularJS監(jiān)聽(tīng)ng-repeat渲染完成的方法
這篇文章主要介紹了AngularJS監(jiān)聽(tīng)ng-repeat渲染完成的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
這篇文章主要為大家介紹了monaco?editor在Angular的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
詳解angular臟檢查原理及偽代碼實(shí)現(xiàn)
這篇文章主要介紹了詳解angular臟檢查原理及偽代碼實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
AngularJS基礎(chǔ) ng-options 指令詳解
本文主要介紹AngularJS ng-options 指令,這里對(duì)ng-options指令的知識(shí)做了詳細(xì)整理,并附有詳細(xì)的代碼示例,有需要的小伙伴可以參考下2016-08-08
實(shí)踐中學(xué)習(xí)AngularJS表單
表單是最常用的一種組建。在Angular.js中，其實(shí)并沒(méi)有單獨(dú)的為表單添加多少特殊功能。但是，利用Angular.js框架本身的特點(diǎn)，可以更友好的呈現(xiàn)表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實(shí)現(xiàn)的2016-03-03
AngularJS全局scope與Isolate scope通信用法示例
這篇文章主要介紹了AngularJS全局scope與Isolate scope通信用法,結(jié)合格式分析了全局scope和directive本地scope相關(guān)功能、通信用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
本篇文章主要介紹了angular中使用Socket.io實(shí)例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
這篇文章主要介紹了Angular1.x復(fù)雜指令,結(jié)合實(shí)例形式分析了指令的使用、模板指令、指令的作用域等概念與具體使用技巧,需要的朋友可以參考下2017-03-03
使用AngularJS編寫(xiě)較為優(yōu)美的JavaScript代碼指南
這篇文章主要介紹了使用AngularJS編寫(xiě)較為優(yōu)美的JavaScript代碼指南,包括控制器和封裝等進(jìn)階技巧上的編程建議,傾力推薦!需要的朋友可以參考下2015-06-06
AngularJS教程之簡(jiǎn)單應(yīng)用程序示例
本文主要介紹AngularJS簡(jiǎn)單應(yīng)用程序,這里提供了詳細(xì)的流程和代碼程序，有需要的小伙伴可以參考下2016-08-08