AngularJS 思维导图模板_ProcessOn思维导图、流程图

AngularJS应用解析

模版

模版是用HTML和CSS编写的文件，展现应用的视图

AngularJS编译器是完全可拓展的，这意味着通过AngularJS可以在HTML中构建自己的HTML标记

应用程序逻辑和行为

主要通过控制器实现

模型数据

AngularJS通过作用域来保持数据模型与视图界面UI的双向同步，一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中

作用域

$rootScope是所有$scope对象的最上层

$scope对象并不负责处理和操作数据，只是负责视图和控制器之间的通信

$scope所有的属性，都可以自动被视图访问到

内部指令

ng-app

指定一个AngularJS应用

只有第一个ng-app会被angular加载，其他的需要手动启动

angular.bootstrap(document.documentElement);

ng-init

指定初始化应用程序数据

ng-model

指定模型，绑定输入与变量

ng-bind

将内容与变量值绑定

ng-if

根据值加载html元素

ng-hide

隐藏或显示HTML元素

ng-show

隐藏或显示一个HTML元素

ng-selected

值为真时选择该选项

ng-disabled

值为真控件不可用

ng-include

将元素内的内容显示为模版内容

ng-class

设置节点的类属性

ng-switch

ng-switch-when

ng-switch-default

ng-src

ng-href

ng-readonly

ng-repeat

重复集合中的每个项目的HTML元素

$index

$first

判断是否是第一个元素

$last

判断是否是最后一个元素

$middle

判断是否是中间元素

事件

内置界面事件

ng-change

ng-click

ng-blur

失去焦点时触发

ng-focus

ng-dbclick

ng-copy

ng-cut

ng-paste

ng-keydown

ng-keyup

ng-keypress

非字符键不会触发keypress事件

ng-mousedown

任何鼠标按键都会触发

ng-mouseenter

ng-mouseleave

ng-mousemove

ng-mouseover

ng-mouseup

ng-submit

内置服务事件

$emit事件

$includeContentRequested

ng-include内容重新加载

从ng-include指令触发

$includeContentLoaded

ng-include内容被请求

从ng-include指令触发

$viewContentLoaded

ng-view内容重新加载

从ng-view指令触发

$broadcast事件

$locationChangeStart

$locationChangeSuccess

$routeChangeStart

$routeChangeSuccess

$routeChangeError

$routeUpdate

$destroy

自定义事件

$broadcast

向下

传递event和data

$emit

向上

传递event和data

$on

响应

接收event和data

event属性

tartgetScope

currentScope

name

stopPropagation()

防止事件进一步冒泡

只适用于$emit

preventDefault()

设置defaultPrevented为真

defaultPrevented

如果调用了preventDefault()则为真

表单

必须指定id和ng-controller

标签

ng-valid

ng-invalid

ng-pristine

未被污染

ng-dirty

属性

$dirty

$valid

$invalid

$error

maxlength

minlength

url

min

max

email

required

表单控件

checkbox

radio

textarea

过滤器

currency

转化为货币格式

{{ 123 | currency }}

date

转化为日期格式

<pre class="prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);">{{ today | date:'medium' }}  {{ today | date:'short' }}  {{ today | date:'fullDate' }}  {{ today | date:'longDate' }}  {{ today | date:'mediumDate' }} {{ today | date:'shortDate' }}  {{ today | date:'mediumTime' }} {{ today | date:'shortTime' }}  </pre>

filter

选出需要的元素

<pre class="prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);">{{ ['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }} </pre>

json

将JSON转化为字符串

<pre class="prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);">{{ {'name': 'Ari', 'City': 'SanFrancisco'} | json }} </pre>

limitTo

截取字符

<pre class="prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);">{{ San Francisco is very cloudy | limitTo:3 }} <；!-- San --> </pre><p data-line-num="207 208" style="margin: 10px 0px; font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px; color: rgb(102, 102, 102);">或最后的六个字符：<pre class="prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);">{{ San Francisco is very cloudy | limitTo:-6 }} </pre>

对数组也可以进行相同的操作】

<pre class="prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);">{{ ['a','b','c','d','e','f'] | limitTo:1 }} </pre>

lowercase

转换为小写

uppercase

将字符串转换为大写形式

number

第二个参数可选，用来设置小数点的位数

<pre class="prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);">{{ 123456789 | number }}  {{ 1.234567 | number:2 }} </pre>

orderBy

排序

第二个参数可选，指定是否逆向排序

控制器

控制器可以理解为一个函数

控制器包含作用域

控制器包含方法

路由

ng-view

$routeProvider

templateUrl

模版的地址

controller

控制器

template

模版

resolve

依赖对象

值

工厂

服务

服务对象是单例对象，创建之后只有在关闭浏览器才会被清楚

我们什么时候应该使用服务呢？答案是：无论何时，当我们需要在不同的域中共享数据的时候。另外，多亏了Angular的依赖注入系统，实现这一点是很容易并且很清晰的。

内置服务

$location

返回当前页面的URL地址

需要在controller中使用

location服务不会重新加载整个页面，只是改变URL，可以用$window服务来设置地址

<pre data-line-num="530 531 532 533" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;">$window.location.href = "/reload/page";</code></pre>

path()

返回当前路径

path('/')

把路径修改为'/'路由

replace()

让用户跳转后不能点击回退按钮

也可以设置参数修改成新的路径

absUrl()

获取编码后的完整URL

host()

获取主机地址

port()

获取端口

protocol()

获取协议

search()

获取查询串

也可以传入参数设置查询

<pre data-line-num="348 349 350 351 352 353 354" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;">// 用对象设置查询 $location.search({name: 'Ari', username: 'auser'}); // 用字符串设置查询 $location.search('name=Ari&username=auser');</code></pre>

url()

获取当前页面的URL

也可以传入参数设置新的URL

$route

在路由的各个阶段都会触发不同的事件

$routeChangeStart

$routeChangeSuccess

$routeChangeError

$routeUpdate

$http

向服务器发送请求，应用响应服务器传送过来的数据

get()

delete()

head()

post()

put()

jsonp()

$timeout

对应JS中的window.setTimeout函数

$interval

对应JS中的window.setInterval函数

每隔一段时间调用一次

$watch

监视某个变量，当变量的值变化时调用

$resource

一个创建资源的工厂

value

值可以改变

.value('realname','zhaoliu')

前面是变量名，后面是值

constant

值不可以改变

.constant('http','www.baidu.com')

前面是变量名，后面是值

service

用new关键字创建

factory

provider

唯一一个可以注入config的服务

可以在provider对象传递到应用程序其他部分之前在app.config函数中对其进行修改

数据绑定

数据模型对象

$scope对象

双向数据绑定

一个简单的例子

<pre data-line-num="192 193 194 195 196 197 198 199 200 201 202 203 204" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;">angular.module('myApp', []) .controller('MyController', function($scope, $timeout) { var updateClock = function() { $scope.clock = new Date(); $timeout(function() { updateClock(); }, 1000); }; updateClock(); });</code></pre>

控制器

控制器是一个函数

ng-app所处的层级的父级作用域是$rootScope，所有作用域都可以访问父级作用域

<p data-line-num="98 99" style="margin: 10px 0px; font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px; color: rgb(102, 102, 102);">通过例子来看一下这个行为。创建一个<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">ParentController</code>，其中包含一个<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">user</code>对象，再创建一个<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">ChildController</code>来引用这个对象：<pre data-line-num="100 101 102 103 104 105 106 107 108 109 110" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;">app.controller('ParentController', function($scope) { $scope.person = {greeted: false}; }); app.controller('ChildController', function($scope) { $scope.sayHello = function() { $scope.person.name = 'Ari Lerner'; }; });</code></pre><p data-line-num="111 112" style="margin: 10px 0px; font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px; color: rgb(102, 102, 102);">如果我们将<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">ChildController</code>置于<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">ParentController</code>内部，那<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">ChildController</code>的<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">$scope</code>对象的父级作用域就是<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">ParentController</code>的<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">$scope</code>对象。根据原型继承的机制，我们可以在子作用域中访问<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">ParentController</code>的<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">$scope</code>对象。<p data-line-num="113 114" style="margin: 10px 0px; font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px; color: rgb(102, 102, 102);">例如，我们可以在<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">ChildController</code>的DOM元素中访问定义在<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">ParentController</code>中的<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">person</code>对象，如图5-2所示。<pre data-line-num="115 116 117 118 119 120 121 122 123" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;"><div ng-controller="ParentController"> <div ng-controller="ChildController"> <a ng-click="sayHello()">Say hello</a> </div> {{ person }} </div></code></pre>

表达式

<span style="color: rgb(102, 102, 102); font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px;"> 当使用 <code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">{{ }}</code><span style="color: rgb(102, 102, 102); font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px;"> 表示法的时候，便设置了一个<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">$watch</code><span style="color: rgb(102, 102, 102); font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px;">。简而言之，这个<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">$watch</code><span style="color: rgb(102, 102, 102); font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px;">函数会监控<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">$scope</code><span style="color: rgb(102, 102, 102); font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px;">上的属性

过滤器

<span style="color: rgb(102, 102, 102); font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px;">在HTML中的模板绑定符号<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">{{ }}</code><span style="color: rgb(102, 102, 102); font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px;">内通过<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">|</code><span style="color: rgb(102, 102, 102); font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px;">符号来调用过滤器

<pre data-line-num="7 8 9 10" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;">{{ name | uppercase }}</code></pre>

name是变量名

<span style="color: rgb(102, 102, 102); font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px;">在JavaScript代码中可以通过<code style="padding: 2px 4px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; font-size: 12px; color: rgb(221, 17, 68); border-radius: 3px; border: 1px solid rgb(225, 225, 232); background-color: rgb(247, 247, 249);">$filter</code><span style="color: rgb(102, 102, 102); font-family: MicrosoftYaHei, 微软雅黑, Arial, Tahoma, Helvetica, Georgia, sans-serif, STXihei, 华文黑体, Hei, "Hiragino Kaku Gothic Pro", SimSun; font-size: 14px; line-height: 22.4px;">来调用过滤器

<pre data-line-num="13 14 15 16 17 18 19 20" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;">app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.name = $filter('lowercase')('Ari'); }]);</code></pre>

自定义过滤器

指令

创建一个简单的自定义指令

<pre data-line-num="127 128 129 130 131 132 133 134 135 136 137" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;">angular.module('myApp',[]) .directive('myDirective', function() { return { restrict: 'E', template: '<a href="http://google.com"> Click me to go to Google</a>' }; });</code></pre>

提示，使用.run访问$rootScope

<pre data-line-num="287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;">angular.module('myApp', []) .run(function($rootScope) { // 使用.run访问$rootScope $rootScope.rootProperty = 'root scope'; })</code></pre>

给指令传递参数

<pre data-line-num="359 360 361 362 363 364 365" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; color: rgb(51, 51, 51); border-radius: 4px; margin-top: 10px; margin-bottom: 10px; line-height: 18px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902); background-color: rgb(245, 245, 245);"><pre data-line-num="553 554 555 556 557 558 559 560" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; border-radius: 4px; margin-top: 10px; margin-bottom: 10px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;"><label>Their URL field:</label> <input type="text"ng-model="theirUrl"> <div my-directive some-attr="theirUrl" my-link-text="Click me to go to Google"></div></code></pre><pre data-line-num="561 562 563 564 565 566 567 568 569 570 571 572 573 574 575 576 577 578 579 580 581" class="代码无行号 prettyprint" style="padding: 8.5px; font-size: 12px; border-radius: 4px; margin-top: 10px; margin-bottom: 10px; word-break: break-all; word-wrap: break-word; white-space: pre-wrap; border: 1px solid rgba(0, 0, 0, 0.14902);"><code style="padding: 0px; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: inherit; border-radius: 3px; border: 0px; background-color: transparent;">angular.module('myApp', []) .directive('myDirective', function() { return { restrict: 'A', replace: true, scope: { myUrl: '=someAttr', // 经过了修改 myLinkText: '@' }, template: '\ <div>\ <label>My Url Field:</label>\ <input type="text"\ ng-model="myUrl" />\ <a href="{{myUrl}}">{{myLinkText}}</a>\ </div>\ }; });</code></pre></pre>