主要是描述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. java的23种设计模式之建造者模式

    场景和本质 场景 本质 案例 原理 应用场景 场景和本质 场景 我们要建造一个复杂的产品.比如:神州飞船,Iphone.这个复杂的产品的创建.有这样一个问题需要处理:装配这些子组件是不是有个步骤问题? ...

  2. Android中的路径记录

    Android中的路径记录 | RobinBlog 导航 导航 博客 分类 标签 友链 关于 搜索 Environment.getDataDirectory().getPath()=/dataEnvi ...

  3. 5.7之sql_model

    问题发生背景 今天在部署项目的时候发现,测试后台接口,直接报 500,仔细一看原来是操作数据库的时候报错了,在本地测试的时候是没遇到类似的问题,数据库的版本是一样的,后面查找资料,说是 MySQL 5 ...

  4. 史上最全Beyond Compare中文文档.CHM （根据官网整理编辑）

    截图如下:  下载地址: 链接:https://pan.baidu.com/s/1Ml98_biT1leXxGLr9fqI_w 提取码:p8jg

  5. css自定义 range radio select的样式滑轮，按钮，选择框

    写在前面: 之前踩坑css的时候,遇到滑轮,按钮,选择框这类型的东西,为了页面效果,总是需要自定义他们的样式,而不使用他们的默认样式.当时写的时候,我也是蛮头疼的,弄了个demo,链接在下面.对此做个 ...

  6. js中的预编译

    预编译 js执行顺序: 词法/语法分析 预编译 解释执行 js中存在预编译 function demo() { console.log('I am demo'); } demo(); //I am d ...

  7. Eureka在有虚拟网卡的情况下获取正确的IP

    发现问题 最近项目在Eureka注册时,发现一个问题:注册的IP地址不是 192.168.0.XXX 的网络IP,而是另外一个网段的地址,如图 通过 ipconfig 命令查看本机的IP地址发现,该I ...

  8. Netty学习（4）：NIO网络编程

    概述 在 Netty学习(3)中,我们已经学习了 Buffer 和 Channel 的概念, 接下来就让我们通过实现一个 NIO 的多人聊天服务器来深入理解 NIO 的第 3个组件:Selector. ...

  9. GPS北斗NTP校时服务器原理及功能介绍

    在科技的发展下GPS北斗NTP校时服务器也得到了广泛应用,比如工业.科研.航空航天.公共场所等领域都用到了GPS北斗NTP校时服务器,该时间服务器以卫星时间为基准授时准确,替代了传统钟表授时的单一和时 ...

  10. SpringBoot WebSocket STOMP 广播配置

    目录 1. 前言 2. STOMP协议 3. SpringBoot WebSocket集成 3.1 导入websocket包 3.2 配置WebSocket 3.3 对外暴露接口 4. 前端对接测试 ...