Angular的指令解析

作者: 联合国抬杠队秘书长
来源: 51数据库
2021-09-21

angular的指令

ng-app ng-controller

ng-app指令用于告诉 angularjs 应用当前这个元素是根元素

所有 angularjs 应用都必须要要一个根元素。

html 文档中只允许有一个ng-app指令，如果有多个ng-app指令，则只有第一个会被使用。

ng-controller指令用于为你的应用添加控制器。

在控制器中，你可以编写代码，制作函数和变量，并使用 scope 对象来访问。

ng-bind ng-init

<p ng-app="" ng-init="mytext='hello world!'">//ng-init为创建一个指定的表达式
<h1 ng-bind="mytext">h1>//ng-bind则是替换当前标签的内容为这个表达式或者变量

//也可以为下面的形式表示是一样的效果

ng-bind-html

ng-bind-html是通过一个安全的方式将内容绑定到 html 元素上,将内容写入html,和ng-bind是有去区别

ng-bind-template

<p ng-app="myapp" ng-bind-template="{{firstname}} {{lastname}}" ng-controller="myctrl">p>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
$scope.firstname = "john";
$scope.lastname = "doe";
});
script>

ng-bind-template指令用于告诉 angularjs 将给定表达式的值替换 html 元素的内容。

当你想在 html 元素上绑定多个表达式时可以使用ng-bind-template指令。

效果和ng-bind有些类似,但是使用方式不同

ng-blur

<body ng-app="">//记得要加上ng-app=””不然不会起作用
<input ng-blur="count = count + 1" ng-init="count=0"/>
<h1>{{count}}h1>
body>

ng-blur指令用于告诉 angularjs html 元素在失去焦点时需要执行的表达式。

angularjs 中的ng-blur指令不会覆盖原生的 onblur 事件，如果触发该事件，ng-blur表达式与原生的 onblur 事件都会执行。

ng-change

值改变事件

//ng-change为方法名,方法在下方 ,ng-model
<p>改变了{{count}} 次p>
p>
<script>
angular.module('myapp', [])
.controller('myctrl', ['$scope', function ($scope) {
$scope.count = 0;
$scope.myfunc = function () {
$scope.count++;
};
}]);
script>

ng-change为值改变触发的事件,需要和ng-model搭配使用,不会覆盖原生的 onchange 事件

用angular.module来注册和检索模块。所有模块应提供给一个应用程序必须使用这种机制注册。当传递了2个或更多的参数时，创建一个新的模块。如果仅通过一个参数，一个现有的模块（作为第一个参数传递给模块）被检索。

ng-checked

ng-checked指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。

如果ng-checked属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

ps:没啥用,直接用jquery做这个方便些

ng-class

ng-class指令用于给 html 元素动态绑定一个或多个 css 类。

ng-class指令的值可以是字符串，对象，或一个数组。

如果是字符串，多个类名使用空格分隔。

如果是对象，需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。

如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象

ps:感觉jquery的addclass某些时候更合适

ng-class-even

//ng-repeat 在这里类似foreach循环 ,x为对象, records为数组
<td>{{x.name}}td>
<td>{{x.country}}td>
tr>
table>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope) {
$scope.records = [
{
"name": "alfreds futterkiste",
"country": "germany"
},
{
"name": "berglunds snabbk",
"country": "sweden"
},
{
"name": "centro comercial moctezuma",
"country": "mexico"
},
{
"name": "ernst handel",
"country": "austria"
}
]
});
script>

为表格的偶数行设置class,用来设置隔行变色jquery也有类似的功能

ng-class-odd

和上一个类似,这个为奇数

ng-click

点击事件,没多少好讲的

ng-cloak

页面加载时防止应用闪烁,加载时防止 angularjs 代码未加载完而出现的问题

ng-copy

文本被拷贝 {{count}} 次。

实例中变量 "count" 的值在输入框的文本被拷贝时会自动增加 1。

在输入框的文本被拷贝时执行的操作

ng-copy指令不会覆盖元素的原始 oncopy 事件, 事件触发时，ng-copy表达式与原始的 oncopy 事件将都会执行

ng-csp

ng-csp指令用于修改 angularjs 的安全策略。

如果使用了ng-csp指令， angularjs 将不会执行eval 函数，这样就无法注入内联样式。

设置ng-csp指令为no-unsafe-eval, 将阻止 angularjs 执行 eval 函数，但允许注入内联样式。

设置ng-csp指令为no-inline-style, 将阻止 angularjs 注入内联样式，但允许执行 eval 函数。

如果开发 google chrome 扩展或 windows 应用ng-csp指令是必须的。

注意:ng-csp指令不会影响 javascript,但会修改 angularjs 的工作方式，这就意味着: 你仍然可以编写 eval 函数, 且也可以正常执行, 但是 angularjs 不能执行它自己的 eval 函数。如果采用兼容模式，会降低 30% 的性能

听过用了能提高性能

ng-cut

ng-cut指令用于告诉 angularjs 在剪切 html 元素的文本时需要执行的操作

ng-cut指令用于告诉 angularjs 在剪切 html 元素的文本时需要执行的操作。

ng-cut指令指令不会覆盖元素的原始 oncut 事件, 事件触发时，ng-cut表达式与原始的 oncut 事件将都会执行。

ng-dblclick

welcome

ng-dblclick指令用于告诉 angularjs 在鼠标双击html 元素时需要执行的操作。

ng-dblclick指令不会覆盖元素的原始 ondblclick 事件, 鼠标双击时，ng-dblclick表达式与原始的 ondblclick 事件将都会执行。

ng-disabled

<body ng-app="">
点击这里禁用所有表单输入域:<input type="checkbox" ng-model="all"><br>//将all为的值绑定当前标签的属性,选中为true
<br>
<input type="text" ng-disabled="all">//all为ng-model绑定的属性
<input type="radio" ng-disabled="all">
<select ng-disabled="all">
<option>femaleoption>
<option>maleoption>
select>

ng-disabled指令设置表单输入字段的 disabled 属性(input, select, 或 textarea)。

如果ng-disabled中的表达式返回 true 则表单字段将被禁用。

ng-focus

<body ng-app="">
<input ng-focus="count = count + 1" ng-init="count=0" />
<h1>{{count}}h1>

ng-focus指令用于告诉 angularjs 在 html 元素获取焦点时需要执行的操作。

ng-focus指令不会覆盖元素的原始 onfocus 事件, 事件触发时，ng-focus表达式与原始的 onfocus 事件将都会执行。

ng-hide

<body ng-app="">
<input type="checkbox" ng-model="myvar">
<p ng-hide="myvar">
<h1>welcomeh1>
<p>welcome to my home.p>
p>

ng-hide指令在表达式为 true 时隐藏 html 元素。

ng-hide是 angularjs 的预定义类，设置元素的display为none。

ng-href

<body ng-app="">
<p ng-init="myvar = 'http://www.baidu.com'">
<h1>angularjs中文网h1>
<p>访问 <a ng-> p>

ng-href指令覆盖了原生的元素 href 属性。

如果在 href 的值中有 angularjs 代码，则需要使用ng-href而不是href。

ng-href指令确保了链接是正常的，即使在 angularjs 执行代码前点击链接

ng-if

//ng-model绑定属性,ng-init创建表达式
<p ng-if="myvar">//if判断
<h1>welcomeh1>
<p>welcome to my home.p>
<hr>
p>

ng-if指令用于在表达式为 false 时移除 html 元素。

如果 if 语句执行的结果为 true，会添加移除元素，并显示。

ng-if指令不同于 ng-hide， ng-hide 隐藏元素，而ng-if是从 dom 中移除元素

ng-include(特殊)

<body ng-app="">
<iframe frameborder="0" scrolling="no" src="demo.html" seamless>iframe>
123123
<p ng-include="'demo.html'">p>
12312

ng-include指令用于包含外部的 html 文件。

包含的内容将作为指定元素的子节点。

ng-include属性的值可以是一个表达式，返回一个文件名。

默认情况下，包含的文件需要包含在同一个域名下。

ps:这个include和标签的include是一样的,包括小脚本,但是和这个iframe差距还是很大,当你用上方代码测试就知道了,如果当你在html页面想要jsp标签的include的效果时,可以用这个.

ng-keydown ng-keypress ng-keyup

分别为按下,按下中,弹回事件

<body ng-app="">
<input ng-keydown="count = count + 1" ng-init="count=0" />
<h1>{{count}}h1>

按下键盘产生的操作,任务键盘即可

ps:建议使用jquery的keydown/keypress/keyup事件,可以指定特定的键产生特定的事件

ng-list

<p ng-app="">
<input ng-model="customers" ng-list="."/>
<pre>{{customers}}pre>

ng-list指令将字符串转换为数组，并使用逗号分隔。

ng-list指令还有另外一种转换方式，如果你有字符串数组希望在输入框中显示，你可以在 input 上使用ng-list指令。

ng-list属性值定义了分隔符。不设置则默认为,

ng-model

<p ng-app="myapp" ng-controller="myctrl" >
<input ng-model="name">
p>
<script>
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
$scope.name = "john doe";
});
script>

ng-model指令绑定了 html 表单元素到 scope 变量中。

如果 scope 中不存在变量, 将会创建它。

一样的效果

ng-mousedown ng-mouseenter ng-mouseleave ng-mousemove

鼠标按下进行的操作鼠标光标穿过的操作光标离开触发光标移动操作

ng-mouver

光标移动到元素上时执行

以上也可以用jquery的事件代替

ng-non-bindable

<p ng-app="">
<p ng-non-bindable>这个代码不需要使用 angularjs: {{ 5+5 }}p>
p>

用于告诉 angularjs 当前的 html 元素或其子元素不需要编译

ng-open

<body ng-app="">
<input type="checkbox" ng-model="showdetails">
<details ng-open="showdetails">
<summary>学的不仅是技术，更是梦想！summary>
<p>- 菜鸟教程p>
details>

ng-open指令用于设置 details 列表的 open 属性。

如果ng-open的表达式返回 true 则 details 列表是可见的。

ng-options

//item.id这个部分是设置value,item.name这个部分是设置label的属性值,names为下方的names,这个类似foreach
<option value="">123option>
select>
<input value="123" type="button" ng-click="ff()">
p>
<script>
var app = angular.module('myapp', []);
app.controller('myctrl', function ($scope) {
$scope.names = [{name: "aaaa", id: "1"},
{name: "bbbb", id: "2"},
{name: "ccc", id: "3"}];
$scope.ff = function () {
//取值
alert($scope.selectedname);
}
});
script>

ng-options指令用于使用填充列表中的

ng-selected属性的表达式返回 true 则选项被选中。

ng-show

<body ng-app="">
显示 html: <input type="checkbox" ng-model="myvar">
<p ng-show="myvar">
<h1>welcomeh1>
<p>welcome to my home.p>
p>

ng-show指令在表达式为 true 时显示指定的 html 元素，否则隐藏指定的 html 元素。

ng-src

<body ng-app="">
<p ng-init="myvar = '../image/img2.png'">
<h1>angularh1>
<img ng-src="{{myvar}}">
p>

ng-src指令覆盖了元素的 src 属性。如果你使用了 angularjs 代码设置图片地址，请使用ng-src指令替代src属性。ng-src指令确保的 angularjs 代码执行前不显示图片。

ng-srcset

<body ng-app="">
<p ng-init="myvar = '../image/img2.png'">
<h1>angularh1>
<img ng-srcset="{{myvar}}">
p>

ng-srcset指令覆盖了元素的 srcset 属性。

如果你使用了 angularjs 代码设置图片地址，请使用ng-srcset指令替代srcset属性。

ng-srcset指令确保的 angularjs 代码执行前不显示图片。

img 元素的 srcset 属性用于根据宽、高和像素密度来加载相应的图片资源

ng-style

<body ng-app="myapp" ng-controller="myctrl">
<h1 ng-style="myobj">菜鸟教程h1>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function ($scope) {
$scope.myobj = {
"color": "white",
"background-color": "coral",
"font-size": "60px",
"padding": "50px"
}
});
script>

ng-style指令为 html 元素添加 style 属性。ng-style属性值必须是对象，表达式返回的也是对象。

对象由 css 属性和值注册，即 key=>value 对。

ng-submit

<body ng-app="myapp" ng-controller="myctrl">
<form ng-submit="myfunc()">
<input type="text">
<input type="submit">
form>
<p>{{mytxt}}p>
<script>
var app = angular.module("myapp", []);
app.controller("myctrl", function($scope) {
$scope.mytxt = "你还没有点击提交!";
$scope.myfunc = function () {
$scope.mytxt = "你点击了提交!";
}
});
script>

ng-submit指令用于在表单提交后执行指定函数。

ng-switch

<body ng-app="">
我喜欢的网站
<select ng-model="myvar">
<option value="runoob">www.runoob.com
<option value="google">www.google.com
<option value="taobao">www.taobao.com
select>
<hr>
<p ng-switch="myvar">
<p ng-switch-when="runoob">
<h1>菜鸟教程h1>
<p>欢迎访问菜鸟教程p>
p>
<p ng-switch-when="google">
<h1>googleh1>
<p>欢迎访问googlep>
p>
<p ng-switch-when="taobao">
<h1>淘宝h1>
<p>欢迎访问淘宝p>
p>
<p ng-switch-default>
<h1>切换h1>
<p>选择不同选项显示对应的值。p>
p>
p>
<hr>
<p>ng-switch 指令根据当前的值显示或隐藏对应部分。p>

ng-switch指令根据表达式显示或隐藏对应的部分。

对应的子元素使用ng-switch-when指令，如果匹配选中选择显示，其他为匹配的则移除。

你可以通过使用ng-switch-default指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

ng-value

<p ng-app="myapp" ng-controller="myctrl">
<input ng-value="myvar">
p>
<script>
var app = angular.module('myapp', []);
app.controller('myctrl', function($scope) {
$scope.myvar = "hello world!";
});
script>

或者

<p ng-app="" ng-init="myvar=123">
<input ng-value="myvar">
p>//赋死值

ng-value指令用于设置 input 或 select 元素的 value 属性。