AngularJS 示例：模板控制語句 if/else

這個示例是嘗試實現(xiàn)：

<div ng-controller="TestCtrl">
  <if true="a == 1">
      <p>判斷為真, {{ name }}</p>
    <else>
      <p>判斷為假, {{ name }}</p>
    </else>
  </if>

  <div>
    <p>a: <input ng-model="a" /></p>
    <p>name: <input ng-model="name" /></p>
  </div>
</div>

考慮實現(xiàn)的思路：

• else 與 if 是兩個指令，它們是父子關(guān)系。通過 scope 可以聯(lián)系起來。至于 scope 是在 link 中處理還是 controller 中處理并不重要。
• true 屬性的條件判斷通過 $parse 服務(wù)很容易實現(xiàn)。
• 如果最終效果要去掉 if 節(jié)點，我們可以使用注釋節(jié)點來“占位”。

JS 代碼：

var app = angular.module('Demo', [], angular.noop);

app.directive('if', function($parse, $compile){
  var compile = function($element, $attrs){
    var cond = $parse($attrs.true);
    
    var link = function($scope, $ielement, $iattrs, $controller){
      $scope.if_node = $compile($.trim($ielement.html()))($scope, angular.noop);
      $ielement.empty();
      var mark = $('<!-- IF/ELSE -->');
      $element.before(mark);
      $element.remove();

      $scope.$watch(function(scope){
        if(cond(scope)){
          mark.after($scope.if_node);
          $scope.else_node.detach();
        } else {
          if($scope.else_node !== undefined){
            mark.after($scope.else_node);
            $scope.if_node.detach();
          }
        }
      });
    }
    return link;
  }

  return {compile: compile,
          scope: true,
          restrict: 'E'}
});

app.directive('else', function($compile){
  var compile = function($element, $attrs){
    
    var link = function($scope, $ielement, $iattrs, $controller){
      $scope.else_node = $compile($.trim($ielement.html()))($scope, angular.noop);
      $element.remove();
    }
    return link;
  }

  return {compile: compile,
          restrict: 'E'}
});

app.controller('TestCtrl', function($scope){
  $scope.a = 1;
});

angular.bootstrap(document, ['Demo']);

代碼中注意一點，就是 if_node 在得到之時，就已經(jīng)是做了變量綁定的了。錯誤的思路是，在 $watch 中再去不斷地得到新的 if_node 。