主要是描述angularJS如何扩展html的：(模型后面会涉及)

例子1：通过指令来扩展html

<body ng-app="myapp">  <!--  ng-app指令 定义angular的最大控制范围-->

　　<div ng-init="name='luna';age=30">  <!-- ng-init指令  可以采用表达式的形式来初始化模型-->

　　　　姓名是：<span>{{name}}</span>

　　　　年龄是：<span>{{age}}</span>  <!-- 表达式可以绑定到html中-->

　　　    加法计算： <span>{{ 100 + 10000}}</span>

　　</div>

　　<div>

　　　　输入价格：<input type="text" ng-model="price"/>  <!--  通过ng-model指令将输入框的值绑定在模型上 -->

　　</div>

</body>

这个示例子主要是描述了angular表达式和指令是如何使用在html中的。

这些指令是angular跟视图能连接起来的唯一方式，做html设计的设计者可以专注于设计这些html模板。

当然也可以自己定义一个指令：

例子：

var app = angular.module("myApp", []);
app.directive("myDirective", function() {
    return {
        template : "<h3>自定义指令!</h3>"
    };
});

返回的对象中包含

{

　　restrict : "EA", // 表示 指令可以放在哪些地方

　　templateUrl : "",   //  html模板地址

　　templete : "",   //  string   html模板字符串表示

}　　

<myDirective></myDirective>  这样就相当于将定义的指令替换在html中。

ng-repeat指令可以遍历数据：

<div ng-app="" ng-init="names=['zhaoyang','john','chenlong']">

<p>使用 ng-repeat 来循环数组</p>

<ul>

　　<li ng-repeat="x in names"> {{ x }}

　　</li>

</ul>

</div>

angularJS表达式和指令的更多相关文章

  1. AngularJS 简介、指令、表达式

    AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HT ...

  2. angularjs学习总结一(表达式、指令、模型)

    一:自执行匿名函数 (function(){ /*code*/})();自执行匿名函数:常见格式:(function() { /* code */ })();解释:包围函数(function(){}) ...

  3. AngularJS的表达式、指令的学习（2）

    最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...

  4. AngularJS表达式

    1. AngularJS使用表达式把数据绑定到HTML. 2. AngularJS表达式的特点: 表达式写在双大括号内:{{表达式}}. 表达式把数据绑定到HTML,这与ng-bind指令有异曲同工之 ...

  5. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  6. 使用Angularjs的ng-cloak指令避免页面乱码

    在使用Anguarjs进行web开发或者进行SPA(single page application)开发时,往往会遇到下面这样的问题. 刷新页面时,页面会出现一些乱码,这里的乱码具体是指`{{expr ...

  7. 带你走近AngularJS - 创建自定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  8. angularjs表达式中的HTML内容，如何不转义，直接表现为html元素

    在模板中直接: 在ionic中直接使用: <p class="contentwen" ng-bind-html="detial.content">& ...

  9. 你知道用AngularJs怎么定义指令吗？

    前言 最近学习了下angularjs指令的相关知识,也参考了前人的一些文章,在此总结下. 欢迎批评指出错误的地方.   Angularjs指令定义的API AngularJs的指令定义大致如下 ang ...

随机推荐

  1. CentOS7用yum安装wget命令后仍然提示命令找不到的解决方法

    需求:用的AWS实例自带的CentOS7用yum安装wget命令后扔提示命令找不到,后面用源码安装方式解决,下面先讲解决方法,疑问及知识点扩展最后写出 1.问题(因是mini版本系统,有些基本命令扔需 ...

  2. Elasticsearch,Filebeat,Kibana部署,添加图表及elastalert报警

    服务端安装 Elasticsearch和Kibana(需要安装openjdk1.8以上) 安装方法:https://www.elastic.co以Ubuntu为例: wget -qO - https: ...

  3. SQL语法练习(一)

    查询学习课程"python"比课程 "java" 成绩高的学生的学号;– 思路:– 获取所有有python课程的人(学号,成绩) - 临时表– 获取所有有jav ...

  4. linux Init分析（原创）

    1.uboot的目标就是启动内核kernel: 2.kernel的目的就是启动应用程序,而第一个应用程序即是Init,构建根文件系统. 从uboot初始化配置后,引导内核的启动,启动函数为:start ...

  5. 20190407-ORID

    2019-04-07 Objective 关于今天的课程,你记得什么? 给代码建立分支的操作 完成了什么? 完成了rails101前6节 Relective 今天的高峰是什么? 成功完成rails10 ...

  6. 手把手教你轻松使用数据可视化BI软件创建某疾病监控数据大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以某疾病监控数据大屏为例为 ...

  7. Web最佳实践阅读总结(2)

    代码符合标准 标准的页面会保证正确的渲染 页面容易被搜索引擎搜索,提高搜索排名(SEO) 提高网站的易用性 网页更好维护和扩展(Validator,HTML Validator 属于Firefox插件 ...

  8. C++对拍

    作为一名OIer,比赛时,对拍是必须的 不对拍,有时可以悔恨终身 首先,对拍的程序 一个是要交的程序 另一个可以是暴力.搜索等,可以比较慢,但是必须正确 下面是C++版对拍程序(C++ & c ...

  9. 【MySQL】：事务四大特性与隔离级别

    目录 一.事务的概念 二.事务的四大特性 1.原子性 2.一致性 3.隔离性 4.持续性 三.事务语句 1.开启事务:start transaction 2.事务回滚:rollback 指定回滚点 3 ...

  10. 基于springboot1.5.9整合shiro时出现静态文件找不到的问题

    开门见山吧,上午对shiro进行整合了下,因为之前使用ssm框架对shiro框架整合过,所以觉得使用springboot再次对shiro框架进行整合也是没啥问题,但最后整合完之后,使用thymelea ...