zoukankan      html  css  js  c++  java
  • Angular JS--指令

    1.Angular JS描述

      Angular JS是通过指令来扩展HTML,带有前缀ng-
        AngularJS 通过内置的指令来为应用添加功能。
        AngularJS 允许你自定义指令。

    2.常见指令

      ng-app: 指令初始化一个 AngularJS 应用程序。
      ng-init :指令初始化应用程序数据。
      ng-model :指令把元素值(比如输入域的值)绑定到应用程序。

      ng-repeat:遍历数组或集合数据

    3.创建自定义指令

      使用 .directive 函数来添加自定义的指令。
      要调用自定义指令,HTML 元素上需要添加自定义指令名。
      使用驼峰法来命名一个指令, runoobDirective, 但在使用它时需要以 - 分割, runoob-directive: 

    <body ng-app="myApp">
    
    <runoob-directive></runoob-directive>
    
    <script>
    var app = angular.module("myApp", []);
    app.directive("runoobDirective", function() {
        return {
            template : "<h1>自定义指令!</h1>"
        };
    });
    </script>
    
    </body>

      调用自定义指令:

        通过元素名调用:例<runoob-directive></runoob-directive>

        通过属性调用:例<div runoob-directive></div>

        通过类名调用:例<div class="runoob-directive"></div>需要指定restrict : "C",

        通过注释调用:例<!-- directive: runoob-directive -->需要指定restrict : "M",

      restrict 值可以是以下几种: (restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令)

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

  • 相关阅读:
    echarts 变量a、b、c、d的含义
    JS实现字符点点loading效果
    ES6的异步 async promise
    ES6中Promise封装ajax的写法
    ES6 set数据结构举例
    notepad++ 正则替换 字符串开始 字符串结束
    php去除bom
    jquery-ui Datepicker 创建 销毁
    Vue-cli3 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB)
    XManager product key
  • 原文地址:https://www.cnblogs.com/-scl/p/7735309.html
Copyright © 2011-2022 走看看