示例：模板控制语句 if/else
最后更新于：2022-04-01 22:40:55
### 18.14. 示例：模板控制语句 if/else
这个示例是尝试实现：
考虑实现的思路：
- _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 = $('');
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` 。
';
判断为真, {{ name }}
判断为假, {{ name }}
a:
name: