index.html

<!doctype html>
<html ng-app="form-example2">
  <head>
    <meta name="title" content="实现自定义的表单控件(用ngModel)">
  </head>
  <body>
    <div contentEditable="true" ng-model="content" title="Click to edit">Some</div>
    <pre>model = {{content}}</pre>

    <style type="text/css">
      div[contentEditable] {
        cursor: pointer;
        background-color: #D0D0D0;
      }
    </style>

    <script src="angular.min.js"></script>
    <script type="text/javascript">
      angular.module('form-example2', []).directive('contenteditable', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      // view -> model
      elm.bind('keyup', function() {
        scope.$apply(function() {
          ctrl.$setViewValue(elm.html());
        });
      });

      // model -> view
      ctrl.$render = function(value) {
        elm.html(value);
      };

      // load init value from DOM
      ctrl.$setViewValue(elm.html());
    }
  };
});
    </script>
  </body>
</html>

<!-- <!doctype html>
<html ng-app="form-example1">
  <head>
    <meta name="title" content="自定义验证">
  </head>
  <body>
    <div ng-controller="Controller">
      <form name="form" class="css-form" novalidate>
        <div>
          Size (integer 0 - 10):
          <input type="number" ng-model="size" name="size"
                 min="0" max="10" integer />{{size}}<br />
          <span ng-show="form.size.$error.integer">This is not valid integer!</span>
          <span ng-show="form.size.$error.min || form.size.$error.max">
            The value must be in range 0 to 10!</span>
        </div>

        <div>
          Length (float):
          <input type="text" ng-model="length" name="length" smart-float />
          {{length}}<br />
          <span ng-show="form.length.$error.float">
            This is not a valid float number!</span>
        </div>
      </form>
    </div>

    <script src="angular.min.js"></script>
    <script type="text/javascript">
      var app = angular.module('form-example1', []);

var INTEGER_REGEXP = /^\-?\d*$/;
app.directive('integer', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (INTEGER_REGEXP.test(viewValue)) {
          // it is valid
          ctrl.$setValidity('integer', true);
          return viewValue;
        } else {
          // it is invalid, return undefined (no model update)
          ctrl.$setValidity('integer', false);
          return undefined;
        }
      });
    }
  };
});

var FLOAT_REGEXP = /^\-?\d+((\.|\,)\d+)?$/;
app.directive('smartFloat', function() {
  return {
    require: 'ngModel',
    link: function(scope, elm, attrs, ctrl) {
      ctrl.$parsers.unshift(function(viewValue) {
        if (FLOAT_REGEXP.test(viewValue)) {
          ctrl.$setValidity('float', true);
          return parseFloat(viewValue.replace(',', '.'));
        } else {
          ctrl.$setValidity('float', false);
          return undefined;
        }
      });
    }
  };
});
    </script>
  </body>
</html> -->

<!-- <!doctype html>
<html ng-app>
  <head>
    <meta name="title" content="简单表单">
  </head>
  <body>
    <div ng-controller="Controller">
      <form name="form" class="css-form" novalidate>
        Name:
          <input type="text" ng-model="user.name" name="uName" required /><br />
        E-mail:
          <input type="email" ng-model="user.email" name="uEmail" required/><br />
        <div ng-show="form.uEmail.$dirty && form.uEmail.$invalid">Invalid:
          <span ng-show="form.uEmail.$error.required">Tell us your email.</span>
          <span ng-show="form.uEmail.$error.email">This is not a valid email.</span>
        </div>

        Gender: <input type="radio" ng-model="user.gender" value="male" />male
        <input type="radio" ng-model="user.gender" value="female" />female<br />

        <input type="checkbox" ng-model="user.agree" name="userAgree" required />
        I agree: <input ng-show="user.agree" type="text" ng-model="user.agreeSign"
                  required /><br />
        <div ng-show="!user.agree || !user.agreeSign">Please agree and sign.</div>

        <button ng-click="reset()" ng-disabled="isUnchanged(user)">RESET</button>
        <button ng-click="update(user)"
                ng-disabled="form.$invalid || isUnchanged(user)">SAVE</button>
      </form>
    </div>

    <script src="angular.min.js"></script>
    <script type="text/javascript">
      function Controller($scope) {
        $scope.master= {};

        $scope.update = function(user) {
          $scope.master= angular.copy(user);
        };

        $scope.reset = function() {
          $scope.user = angular.copy($scope.master);
        };

        $scope.isUnchanged = function(user) {
          return angular.equals(user, $scope.master);
        };

        $scope.reset();
      }
    </script>
  </body>
</html> -->

<!-- <!doctype html>
<html ng-app>
  <head>
    <meta name="title" content="AngularJS表达式">
  </head>
  <body>
    <div ng-controller="Cnt12" class="expressions">
      Expresssion:
      <input type="text" ng-model="expr" size="80">
      <button ng-click="addExp(expr)">Evaluate</button>
      <ul>
        <li ng-repeat="expr in exprs">
          [<a href="" ng-click="removeExp($index)">X</a>]
          <tt>{{expr}}</tt>=><span ng-bind="$parent.$eval(expr)"></span>
        </li>
      </ul>
    </div>

    <footer>
      <script src="angular.min.js"></script>
      <script type="text/javascript">
        function Cnt12 ($scope) {
          var exprs = $scope.exprs = [];
          $scope.expr = '3*10|currency';
          $scope.addExp = function (expr) {
            exprs.push(expr);
          }

          $scope.removeExp = function (index) {
            exprs.splice(index, 1);
          }
        }
      </script>
    </footer>
  </body>
</html> -->

<!-- <html ng-app="time">
  <head>
    <meta name="title" content="获取当前时间的指令">
  </head>
  <body>
    <div ng-controller="Ctrl2">
      Date format:<input ng-model="format"><hr>
      Current time is:<span my-current-time="format"></span>
    </div>

    <footer>
      <script src="angular.min.js"></script>
      <script type="text/javascript">
        function Ctrl2($scope) {
          $scope.format = 'M/d/yy h:mm:ss a';
        }

        angular.module('time', [])
          .directive('my-current-time', function ($timeout, dateFilter) {
            return function(scope, element, attrs) {
              var format,
                  timeoutId;
              function updateTime() {
                element.text(dateFilter(new Date(), format));
              }

              scope.$watch(attrs.myCurrentTime, function (value) {
                format = value;
                updateTime();
              })

              function updateTime() {
                timeoutId = $timeout(function () {
                  updateTime();
                  updateLater();
                }, 1000)
              }
              element.bind('$destory', function () {
                $timeout.cancel(timeoutId);
              });

              updateLater();
            }
          })
      </script>
    </footer>
  </body>
</html> -->

<!-- <!doctype html>
<html ng-app>
  <head>

  </head>
  <body>
    <div ng-controller="Ctrll">
      Hello <input ng-model='name'><hr>
      <span ng:bind='name'></span><br>
      <span ng_bind='name'></span><br>
      <span ng-bind='name'></span><br>
      <span data-ng-bind='name'></span><br>
      <span x-ng-bind="name"></span><br>
    </div>

    <footer>
      <script src="angular.min.js"></script>
      <script src="script.js"></script>
    </footer>
  </body>
</html>
 -->