解決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();
                  });
                }
              };
            }
          ]);

demo效果請移步jsbin demo;