AngularJS - 指令

最新推荐文章于 2024-05-13 14:54:25 发布
最新推荐文章于 2024-05-13 14:54:25 发布
阅读量132 收藏
点赞数
分类专栏： Angular JS 文章标签： Angular
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stu_20052369/article/details/86687100
版权

1. ng-app ng-controler

ng-app 指令定义了 AngularJS 应用程序的 根元素。

ng-app 指令在网页加载完毕时会自动引导（自动初始化）应用程序。

ng-controller 指令用于为你的应用添加控制器。在控制器中，我们可以编写代码，制作函数和变量，并使用 scope 对象来访问。

 

2.ng-init ng-modal ng-bind

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>

<body>

    <div ng-app="" ng-init="firstName='Gao';secondName='Jamie'; 
			    person={firstName:'Gao',secondName:'Jamie'}">
        <!--
             1.ng-init初始化变量
             2.ng-init初始化对象
         -->
        <p>名字 : <input type="text" ng-model="secondName"></p>
        
        <h1>Hello {{secondName}} {{firstName}}</h1>
         <!--
          ng-model 是用于表单元素的，支持双向绑定。对普通元素无效；
          ng-bind 用于普通元素，不能用于表单元素，应用程序单向地渲染数据到元素；
         -->
        <h1>Hello {{secondName + " "+ firstName}} </h1>

        <h1>Hello {{person.secondName +" "+ person.firstName}} </h1>

        <h1 ng-bind='"Hello "+secondName+" "+firstName'></h1>

        <div data-ng-init="names=[{name:'Jamie',city:'葫芦岛'},
				  {name:'kimi',city:'沈阳'},
                                  {name:'Nero',city:'沈阳'}]">
                     <!--ng-init 初始化数组 -->
            <ul>
                <li data-ng-repeat="item in names">{{item.name}} - {{item.city}}</li>
            </ul>

            <h1>Hello {{names[2].name}} </h1>

        </div>

        <!--
            ng-init 初始化 AngularJS 应用程序变量。
            1.不同变量之间用分号;分割。
            2.data-ng-init 和ng-init的用法相同。
            
            ng-bind & 表达式{{}}
            1. ng-bind 和表达式{{}}效果基本上是一样的 。
            2. 如果网页没有被正常地渲染，那么表达式将原型显示出来，
                用户将看到代码显示在网页上，而即使网页发生错误，无法正常渲染数据，
                ng-bind将不会将代码显示在网页上，提供用户体验。
            3. ng-bind 和 {{}} 同时使用时，ng-bind 绑定的值覆盖该元素的内容。


        -->
    </div>

</body>

</html>

 

3. ng-model 指令

  ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。

    a.双向绑定，在修改输入域的值时， AngularJS 属性的值也将修改：

    b. 验证用户输入

<form ng-app="" name="myForm">
    Email:
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">不是一个合法的邮箱地址</span>
</form>

  提示信息会在 ng-show 属性返回 true 的情况下显示

 

4.自定义指令

可以使用 .directive 函数来添加自定义的指令。

要调用自定义指令，HTML 元素上需要添加自定义指令名。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>

<body ng-app="myApp" ng-controller="DirectiveController">

    <!-- <first-directive></first-directive> -->

    <!-- 如果使用元素的命名方式，千万不要为了简洁省略掉结束符，而写成<second-directive/>-->
    <second-directive></second-directive> 
    <label class="secondDirective"></label>
    <label second-directive></label>
    <!-- 使用驼峰法来命名一个指令， secondDirective, 但在使用它时需要以 - 分割, second-directive: -->
    <!-- directive:third-directive -->

    <!-- <third-directive></third-directive> -->

    <script>
       

        angular.module('myApp', []).directive('firstDirective', [function () {
            return {
                // scope: false, // 默认值，共享父级作用域
                controller: function ($scope, $element, $attrs, $transclude) {
                    $scope.name = "Jamie-2";
                    //修改name时，父级作用域中的name也会变化

                },
                restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment . restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令
                template: 'first name:{{name}}<br/>',
            };
        }]).directive('secondDirective', [function () {
            return {
                scope: true, // 继承父级作用域并创建指令自己的作用域
                controller: function ($scope, $element, $attrs, $transclude) {
                    $scope.name = "Jamie-2";

                },
               
                restrict: 'ACEM', // E = Element, A = Attribute, C = Class, M = Comment
                //修改name时，secondDirective会在自己的作用域中新建一个name变量，与父级作用域中的
                // name相对独立，父级作用域中的name不会变化,同时修改父级作用域中的name 也不会影响secondDirective中的name.
                // 但是可以继承来自于父级作用域的变量。 

                template: 'second name:{{familyName}} {{name}}<br/>'

            };
        }]).directive('thirdDirective', [function () {
            return {
                scope: {}, // 创建指令自己的独立作用域，与父级没有关系
                controller: function ($scope, $element, $attrs, $transclude) {
                    $scope.name = 'Jamie-3';
                    // 在自己的作用域中声明变量。 
                },
                replace: true,  // replace 需要为true， 否则评论是不可见的
                restrict: 'M', // E = Element, A = Attribute, C = Class, M = Comment。 restrict的值需要包涵M 
               
                template: '<label>third name:{{name}}</label>' //  template 需要带标签，评论才能正确的显示。
            };
        }])
            .controller('DirectiveController', ['$scope', function ($scope) {
                $scope.name = "Jamie";
                $scope.familyName = "Gao";
            }]);
    </script>
    <div>
        Parent scope:
        <input type="text" ng-model="name">
    </div>
</body>

</html>

 

杨广凡
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular 指令
Jq的博客
09-12 2193
Angular 指令的不同类型如下： 组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。 属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。 结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。 内置指令 内置属性型指令： 常见的内置属性型指令 作用 NgClass 添加和删除一组 CSS 类 NgStyle 添加和删除一组 HTML 样式 NgModel 将数据双向绑定添加到 HTML 表单元素 内置结构型指令 结构型指令的职责是
angularjs-multiselect-dropdown:angularjs中的可自定义多选下拉菜单
03-19
7. **事件监听**：使用`ng-change`等AngularJS指令来监听用户的选中或取消选择。 ### 示例代码 ```html <div ng-app="myApp" ng-controller="myCtrl"> <multiselect ng-model="selectedItems" display-prop="name...
angular常用指令
limts的博客
11-22 1327
1.ng-app 初始化Angular JS应用程序 2.ng-bind 绑定HTML元素到程序中 3.ng-init 初始化数据 4.ng-model 绑定控制器中的值到应用数据中 5.ng-repeat 定义集合中每项数据的模板 6.ng-src 指定img元素的src属性 7.ng-class 指定HTML元素使用的css类 8.ng-disabled 规定一个元素是否被禁用，参数是布尔值 ...
AngularJS指令
最新发布
Thewei666的博客
05-13 482
AngularJS中使用模块的 directive() 函数来自定义指令app.directive('指令名称',function(){return{template,replace ,restrict,...})
angular指令总结
nunumaymax的博客
10-23 898
angular中不常用却又非常有用的指令总结前言ng-list定义和用法语法二、使用步骤1.引入库2.读入数据总结 前言 angular中有一些不常用，但却非常有用的指令，如果在开发过程中可以直接使用这些指令，会大大地加快我们的开发效率。 angular官网地址：https://www.angularjs.net.cn/api/ng/directive ng-list 定义和用法 ng-list 指令将输入的字符串转换为数组，并使用逗号分隔。 ng-list 指令还有另外一种转换方式，可以将数组转化为
AngularJS指令开发（1）——参数详解
weixin_33836223的博客
11-01 520
费了不少时间泡在自己的Angular UI for mobile计划，但看来是要搁置一下。一个是因为最近公司项目紧，自己还要忙着考驾照，心力交瘁啊。当然，最重要的原因还是，在Angular的使用上，钻得越深，发现水越深，不得不停下来，重新整理一下知识点。 赶紧开始。 指令，很重要 AngularJS与JQuery最大的区别在哪里？我认为，...
Angular系列教程之自定义指令
zzcoder的博客
01-16 1043
在Angular中，指令是一种非常强大的工具，用于扩展HTML元素的功能和行为。它们允许我们创建可重用的组件，并在应用程序中的多个地方使用它们。本文将介绍Angular指令的基础知识，并附上示例代码进行解释说明。通过本文，我们了解了Angular中指令的基本概念和使用方法。指令是Angular应用程序中非常有用的工具，可以扩展HTML元素的功能和行为。我们可以定义自己的指令，并在模板中使用它们，从而实现更丰富的用户界面效果。希望本文对你理解Angular指令有所帮助！
前端项目-angularjs-dropdown-multiselect.zip
09-03
"angularjs-dropdown-multiselect"是一个专门用于创建下拉多选框的AngularJS指令，它使得在Web应用中实现多选下拉菜单变得极其简单。该指令集成了基本的多选、搜索过滤、分组等功能，极大地提高了用户体验。其主要...
angularjs-datetime-picker
10-06
首先，`index.html`文件是项目的主入口点，通常包含HTML结构和AngularJS指令。在这个文件中，开发者会看到datetime-picker指令被用来插入日期时间选择器组件。例如，可能会有类似`<datetime-picker ng-model=...
angularjs-gravatardirective:AngularJS Gravatar 图像指令
06-14
#AngularJS Gravatar 图像指令这是一个简单的 AngularJS 指令，它获取一个电子邮件地址并创建一个图像标签，以从 Gravatar 网站中提取头像图像。 有关如何编写指令的完整教程位于用法要使用该指令： 在您的项目中...
AngularJS-SPA-Template-master.zip_Angularjs-master_angularjs_asp
09-20
AngularJS的核心特性包括指令系统，它允许开发者扩展HTML语法来创建交互式的组件；服务，如$http用于处理Ajax请求，$scope用于管理应用的模型；以及依赖注入，简化了代码的组织和测试。 **SPA（单页应用程序）** ...
Angular的自定义指令以及实例
08-31
本文主要介绍了Angular的自定义指令，并提供了实例代码，具有很好的参考价值，下面跟着小编一起来看下吧
自定义Angular指令
rongfengjin4315的博客
04-03 1844
Angular指令分为三种，组件（带模板指令）、结构型指令（改变宿主文档结构）、属性型指令（改变宿主行为），下面主要介绍自定义结构型指令和自定义属性型指令。 一、自定义结构型指令 一个元素上只能放一个结构型指令 ...
Angular指令
lvxinaidou的博客
01-04 889
1. 上面是指令 指令是为 Angular 应用程序中的元素添加额外行为的类。使用 Angular 的内置指令，你可以管理表单、列表、样式以及要让用户看到的任何内容。 2.指令分类 Angular 指令的不同类型如下： 组件 —— 带有模板的指令。这种指令类型是最常见的指令类型。 属性型指令 —— 更改元素、组件或其他指令的外观或行为的指令。 结构型指令 —— 通过添加和删除 DOM 元素来更改 DOM 布局的指令。 内置属性指令： ngClass, ngStyle,ngModel 内置结构指令： ng
Angular自定义指令
weixin_47144417的博客
03-11 2231
Angular自定义指令 Angular自定义指令（一 ） 实现添加某个属性，标签颜色发生改变 1.创建自定义指令文件（选择器） ng g directive directive/yustyle 2.ts文件中 import { Directive, ElementRef} from '@angular/core'; @Directive({ selector: '[appYustyle]' }) export class YustyleDirective { constructor(priv
angular的指令
巴啦啦bla的学习之路
01-18 898
1.HTML文件 循环数据 显示数据索引（key） ul> <li *ngFor="let item of list let key=index;"> let key=index;意思是将angular的索引赋值给key {{key}} {{item.title}} </li> </ul> Ts文件 public list:any[]=[ { "title":'我是标题一' }, { "title":'我是标题二
angular6 指令
CHL博客
07-29 2246
一  在 Angular 中有三种类型的指令： 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令  如 NgFor 和 NgIf   用法：*ngIf  *ngFor  语法糖* 属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。  NgStyle  和NgSwitch   用法： [NgStyle] [ngCl...
AngularJS中的指令详解（1）
liwusen的博客
06-10 1572
1.我们知道AngualrJS的重要的特性（1）MVC/MVVM（2）双向数据绑定（3）模块化和依赖注入（4）指令。 下面来介绍下什么是AngularJS中的指令： 首先，什么是指令，举例来说明： JS部分： angular.module('myapp',[]) .directive('hello',function(){
angularjs 1.6.9 ng-bind指令
05-26
在 AngularJS 1.6.9 中，ng-bind 指令用于绑定 HTML 元素的 innerText 或 value 属性到表达式的值。 例如，可以使用以下代码将一个变量绑定到一个 HTML 元素的 innerText 属性： ``` <div ng-bind="myVariable"></div> ``` 在上面的代码中，变量 myVariable 的值将显示在 div 元素的 innerText 属性中，当该变量的值发生变化时，div 元素的文本也会更新。 类似地，也可以使用 ng-bind 指令将变量绑定到 input 元素的 value 属性： ``` <input type="text" ng-bind="myVariable" /> ``` 在上面的代码中，变量 myVariable 的值将显示在 input 元素的 value 属性中，当该变量的值发生变化时，input 元素的值也会更新。 需要注意的是，ng-bind 指令只能绑定表达式的值到元素的 innerText 或 value 属性中，而不能绑定 HTML 代码。如果需要绑定 HTML 代码，可以使用 ng-bind-html 指令。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值