zoukankan      html  css  js  c++  java
  • AngularJS(三)——指令实战及自定义指令

    前言

        上篇介绍了一些指令的应用,本篇介绍一些常用的用法格式。

    内容

    指令实战

    下面通过输入一个名字实现实时更新文本内容。

        需要的指令有:

        ng-appng-modelng-bindn-init

    Demo

    要引用的文件(这里第一次出现以后,后面引用的都是这个文件,以后不再重复)

     

    <head>
    <meta charset="utf-8">
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script> 
    </head>

    Body部分

     

    <body>
    
    <div ng-app="" ng-init="firstName='zhou'">
    <p>在输入框中尝试输入:</p>
    <p>姓名: <input type="text" ng-model="firstName"></p>
    <p>你输入的为: {{ firstName }}</p>
    <p ng-bind='firstName'></p>
    </div>
    
    </body>

    实现的效果:

     

    该例子解析:

        ng-app:该指令告诉AngularJS<div>元素是AngularJS应用程序的所有者,在网页加载完毕时会自动引导(自动初始化)应用程序);

        ng-model:该指令绑定HTML元素到应用程序数据;

        ng-bind:绑定要运算的要显示的内容数据,用于显示通过绑定HTML元素到应用程序的数据;

        ng-init:该指令为AngularJS应用程序的定义了初始值;

    创建自定义指令

        使用.directive函数来添加自定义的指令,使用驼峰法来命名一个指令,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>

    小结

        本篇大概说了指令的应用格式以及怎么创建自定义指令。

     

    感谢您的宝贵时间···

  • 相关阅读:
    失效的Eclipse API(一)
    contiki系统分析四:内存分配
    Failure [INSTALL_PARSE_FAILED_NO_CERTIFICATES]
    Error about updating UI in background thread
    ubuntu 安装ssh server
    [置顶] 树链剖分小节
    [置顶] LCA的树链剖分实现
    飞天开放平台编程指南——阿里云计算的实践
    一道C#面试题
    jQuery参考实例 1.8 将前一次选择的元素集合并到当前选择的元素集中
  • 原文地址:https://www.cnblogs.com/zhoulitong/p/6412338.html
Copyright © 2011-2022 走看看