AngularJS (1)

AngularJS 扩展了 HTML (MVC)

view(视图):html

model(模型):可用的数据

Controller(控制器): js

 

AngularJS 通过 ng-directives 扩展了 HTML。

指令:

  ng-app 指令定义一个 AngularJS 应用程序。

  ng-model 指令把元素值(比如输入域的值)绑定到应用程序。(有四个状态:(invalid, dirty, touched, error):)

  ng-bind 指令把应用程序数据绑定到 HTML 视图。{{ss}} = (ng-bind='ss')

  ng-init 指令初始化应用程序数据。

  ng-repea  使用 ng-repeat 来循环数组(对象)

  ng-empty

  ng-not-empty

  ng-touched

  ng-untouched

  ng-valid

  ng-invalid

  ng-dirty

  ng-pending

  ng-pristine

 

AngularJS 自定义指令

<body ng-app="myApp"> -- 根元素
  调用方法1:元素名
<runoob-directive></runoob-directive>

  调用方法2:属性

<div runoob-directive2></div>

<div runoob-directive></div>

  调用方法3:类名

<div class="runoob-directive3"></div>

  调用方法4:注释

<!-- 指令: runoob-directive4 -->

<script>

  1.自定义 runoob-directive 指令
    var app = angular.module("myApp", []);

    //定义可以使用class(元素名和属性名) 来获取
    app.directive("runoobDirective", function() {
      return {
        template : "<h1>自定义指令!</h1>"
          };
       });

    //定义可以使用class(属性) 来获取
    app.directive("runoobDirective2", function() {
      return {

        restrict : "A",
        template : "<h1>自定义指令!</h1>"
          };
       });

    //定义可以使用class(类名) 来获取

    app.directive("runoobDirective3", function() {
      return {

        restrict : "C",
        template : "<h1>自定义指令!</h1>"
          };
       });

    //定义可以使用class(注释) 来获取

    app.directive("runoobDirective4", function() {
      return {
        restrict : "M",
        replace : true,
        template : "<h1>自定义指令!</h1>"
      };
    });


</script>

restrict 值:

  • E 作为元素名使用
  • A 作为属性使用
  • C 作为类名使用
  • M 作为注释使用

</body>

 

posted on 2016-10-14 10:57  爱海滔滔  阅读(142)  评论(0编辑  收藏  举报