AngularJS解決ng介面長運算式(ui-set)的方法分析_AngularJS

本文執行個體講述了AngularJS解決ng介面長運算式(ui-set)的方法。分享給大家供大家參考，具體如下：

本文來自網友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 預先賦給一個臨時的變數, 然後在 兩個 span中只需 o.name, o.state 就行了呢? 我覺得這樣解析起來是不是快一點.

    但是我試了, 並沒有成功. 求指點.
    先謝了.

在這裡首先需要說明的是ng介面的所有引用都需要在$scope這個viewmodel(ui和view的膠水層)，所以如果我們希望能夠把運算式變得更可讀，更友好，那麼我們就必須在$scope上建立這個變數。

再則對於ng其使用使用的一堆的$watch，實現髒檢查，如果你理解這些了，那麼我們就可以很容易的實現一套如spring的

<c:set var="xxx" expression="xxx" />

的tag.

對於實現這類tag，我們最好的方式則是利用ng的directive來實現，代碼如下：

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程式設計有所協助。