### 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(); 1314 $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 } 2829 return {compile: compile, 30 scope: true, 31 restrict: 'E'} 32 }); 3334 app.directive('else', function($compile){ 35 var compile = function($element, $attrs){ 3637 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 } 4344 return {compile: compile, 45 restrict: 'E'} 46 }); 4748 app.controller('TestCtrl', function($scope){ 49 $scope.a = 1; 50 }); 5152 angular.bootstrap(document, ['Demo']); 代码中注意一点，就是 `if_node` 在得到之时，就已经是做了变量绑定的了。错误的思路是，在 `$watch` 中再去不断地得到新的 `if_node` 。