AngularJS学习笔记

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

 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']);