Angular——内置指令

内置指令

ng-app 指定应用根元素,至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示,true显示、false不显示
ng-hide控制元素是否隐藏,true隐藏、false不隐藏
ng-if控制元素是否“存在”,true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }

        .blue {
            color: blue;
        }

        .yellow {
            color: yellow;
        }
    </style>
</head>
<body ng-app="App">
<div ng-controller="DemoController">
    <h1 ng-show="false">ng-show</h1>
    <h1 ng-hide="true">ng-hide</h1>
    <h1 ng-if="false">ng-if</h1>
    <img ng-src="{{path}}">
    <span ng-class="{red:true,blue:true}">ng-class</span>
</div>
<script src="../libs/angular.min.js"></script>
<script>
    var App = angular.module(‘App‘, []);
    App.controller(‘DemoController‘, [‘$scope‘, function ($scope) {
        $scope.path = ‘./images/2203.png‘;
    }]);
    //ng-if可以将元素直接移除,ng-show与ng-hide页面虽然看不到,但是检查依然可以看见
    //ng-src scr的值若是一个绑定的值,浏览器渲染的时候会发送请求,因为没解析到脚本,所以不认识这里会有一个小bug,直到
    //解析到了脚本以后才会去替换这个img标签里src的值
    //ng-href同上
</script>
</body>
</html>

原文地址:https://www.cnblogs.com/wuqiuxue/p/8410435.html

时间: 2024-10-13 02:13:06

Angular——内置指令的相关文章

Angular内置指令

以ng前缀开头的都是内置指令,因此不要以ng开头命名自定义指令.此外还有其他内置指令在标签中不易发现,如<a>和<form>. 一,布尔属性 1  ng-disabled 可以在input,textarea,select,button绑定 例一:按钮一直禁用,直到用户在文本字段中输入内容 <input type="text" ng-model="someProperty" placeholder="TypetoEnable&q

Angular内置指令(一)

要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng-class,ng-style ng-disabled 当它的值返回true时表示禁用当前元素,返回false时什么都不做 <body> <!--在文本框输入内容时禁用按钮--> <input type="text" ng-model="name&qu

Angular内置指令(二)

目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,ng-bind-template,ng-change,ng-submit,ng-cloak,ng-bind 详细介绍: $rootScope 是作用域链的起始点,任何嵌套在ng-app内的指令都会继承$rootScope ng-app 任何具有ng-app属性的dom元素都将被标记为$rootScop

Angular中的内置指令和自定义指令

NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互. How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用. 内置指令 在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的.简单看一下一些

AngularJS内置指令集合

ng-model 将表单控件和当前作用域的属性进行绑定 代码如下: <input type="text" ng-model="someModel.someProperty" /><br>{{someModel.someProperty}} ng-init 该指令被调用时会初始化内部作用域.这个指令一般会出现在比较小的应用中,比如给个demo什么的... 代码如下: <div ng-init="job='fighter'&quo

Angular2 内置指令 NgFor 和 NgIf 详解

http://www.jb51.net/article/89781.htm 在这一章节中,我们来学习如何使用Angular2来展示数据,以及如何使用它的内置指令NgFor和NgIf 首先要确保你有一个可以运行起来的Angular2的样例程序,最好就是我们上一章节中完成的那个QuickStart小项目或者你自己根据官网上面的步骤完成的QuickStart小项目,因为我们的讲解都是在那个基础上来进行的;然后让我们开始下面的快乐旅程吧. 因为我们的这一系列的文章都是使用的Typescript所以在看下

AngularJS内置指令

内置指令 所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突.首先从一些常见的内置指令开始.先列出一些关键的内置指令,顺便简单说说作用域的问题. ng-model 将表单控件和当前作用域的属性进行绑定,这么解释似乎也不太正确.但先不要管咬文嚼字,用起来倒是易懂,例如: 代码如下: <input type="text" ng-model="someModel.someProperty" /><br>{{someModel.som

简话Angular 03 Angular内置表达式大全

一句话: 大多数html标签属性和事件都有一个对应的ng指令 说明:这些指令和原生html最大的区别就是可以动态更新.比如一个div的样式用ng-class后,我们就可以随意应用css class. 1. 内置指令大全 ng-include 包含一个文件 ng-href ng-src 对应 href src ng-disabled ng-readonly 对应 disabled readonly ng-checked ng-selected ng-options ng-true-value ng

AngularJS 内置指令(二)

下面将要介绍的指令会以父级作用域为原型生成子作用域.这种继承的机制可以创建一个隔 离层,用来将需要协同工作的方法和数据模型对象放置在一起. ng-app 和ng-controller是特殊的指令,因为它们会修改嵌套在它们内部的指令的作用域. ng-app 为AngularJS应用创建$rootScope,ng-controller则会以$rootScope或另外一个 ng-controller 的作用域为原型创建新的子作用域. 1. 子作用域: <!doctype html> <html