主要是描述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. OAuth 2.0学习笔记

    文章目录 OAuth的作用就是让"客户端"安全可控地获取"用户"的授权,与"服务商提供商"进行互动. OAuth在"客户端&quo ...

  2. 通过IE私有滤镜让IE6 7 8支持背景透明，内容不透明效果。

    CSS3已经支持背景rgba的rgba透明度,这一方法可以避免元素内容也随背景一起变透明(详情请阅http://www.cssha.com/css3-new-knowledge-student).但是 ...

  3. Hibernate入门之主键生成策略详解

    前言 上一节我们讲解了Hibernate命名策略,从本节我们开始陆续讲解属性.关系等映射,本节我们来讲讲主键的生成策略. 主键生成策略 JPA规范支持4种不同的主键生成策略(AUTO.IDENTITY ...

  4. sql--测试商品的重要度,是否需要及时补货

    表1:商品表 表2:商品售卖表 需求:算出商品的平均点击率.平均销售.商品受欢迎度 1.使用inner join查出每件商品的点击率和销售额度 ) as selas from test a left ...

  5. 前端每日实战：152# 视频演示如何用纯 CSS 创作一个圆点错觉效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gBwzKR 可交互视频 此视频是可 ...

  6. 前端每日实战：85# 视频演示如何用纯 CSS 创作一个小球反弹的动画

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/OwWROO 可交互视频 此视频是可 ...

  7. 前端每日实战：60# 视频演示如何用纯 CSS 创作一块乐高积木

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/qKKqrv 可交互视频 此视频是可 ...

  8. React的路由react-router

    意思是:当你写一个web应用时候,应噶install的是react-router-dom,同样的,当你想写一个Native应用时候,需要install的是react-router-native,这两个 ...

  9. vuex和localStorage，全局变量的区别

    vuex是状态管理,是为了解决跨组件之间数据共享问题的,一个组件的数据变化会映射到使用这个数据的其他组件当中.如果刷新页面,之前存储的vuex数据全部都会被初始化掉. localStorage是H5提 ...

  10. 2020Ubuntu server1804最新安装后的配置

    一.Putty进行ssh连接. 完成最基本配置之后,就远程连接服务器了.在windows是我习惯putty 在我以前的老电脑里面找一个putty是0.6版本的,连上Ip ,还是原来的配方,还是原来的味 ...