Question

18.14. 示例：模板控制语句 if/else

这个示例是尝试实现：

  <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>

考虑实现的思路：

• `else` 与 `if` 是两个指令，它们是父子关系。通过 scope 可以联系起来。至于 scope 是在 link 中处理还是 controller 中处理并不重要。
• `true` 属性的条件判断通过 `$parse` 服务很容易实现。
• 如果最终效果要去掉 `if` 节点，我们可以使用注释节点来“占位”。

JS 代码：

 1   var app = angular.module('Demo', [], angular.noop);
 2   
 3   app.directive('if', function($parse, $compile){
 4     var compile = function($element, $attrs){
 5       var cond = $parse($attrs.true);
 6       
 7       var link = function($scope, $ielement, $iattrs, $controller){
 8         $scope.if_node = $compile($.trim($ielement.html()))($scope, angular.noop);
 9         $ielement.empty();
10         var mark = $('<!-- IF/ELSE -->');
11         $element.before(mark);
12         $element.remove();
13   
14         $scope.$watch(function(scope){
15           if(cond(scope)){
16             mark.after($scope.if_node);
17             $scope.else_node.detach();
18           } else {
19             if($scope.else_node !== undefined){
20               mark.after($scope.else_node);
21               $scope.if_node.detach();
22             }
23           }
24         });
25       }
26       return link;
27     }
28   
29     return {compile: compile,
30             scope: true,
31             restrict: 'E'}
32   });
33   
34   app.directive('else', function($compile){
35     var compile = function($element, $attrs){
36       
37       var link = function($scope, $ielement, $iattrs, $controller){
38         $scope.else_node = $compile($.trim($ielement.html()))($scope, angular.noop);
39         $element.remove();
40       }
41       return link;
42     }
43   
44     return {compile: compile,
45             restrict: 'E'}
46   });
47   
48   app.controller('TestCtrl', function($scope){
49     $scope.a = 1;
50   });
51   
52   angular.bootstrap(document, ['Demo']);

代码中注意一点，就是 if_node 在得到之时，就已经是做了变量绑定的了。错误的思路是，在 $watch 中再去不断地得到新的 if_node 。