### 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` 。