angularjs指令的学习

2019年9月15日 185次阅读 来源: 笙歌会停

指令是angluarjs的一个标志，是有别于其他框架的重要特征，因此学习angularjs,指令是必须认真而系统的学习的。

指令概述

指令是一种执行信号，发布了一个指令就要某种行为，在html中各种标签可以理解为指令，例如a标签，就是告诉浏览器要创建一个超链接。

《angularjs指令的学习》

就是一个指令的基本格式，指令使用时只需把指令的标签放在相应的位置就行

《angularjs指令的学习》

由于本团队使用了yeoman创建项目，因此创建指令可以使用yeoman的命令：

yo angular:directive <name>

yoeman还有许多便捷的命令，这里不再细说

指令的常用属性

restrict

restrict属性指出的是指令在html中的使用方法，一共有”E”,”A”,”M”,”C”四种，对应标签（element），属性（attribute），类（class），注释（comment）；可以多个同时使用，比如EAC,表示支持多种方式的使用

《angularjs指令的学习》

replace

这是指令的另一个属性，暂时没想到他应该在何种情况下使用，但是书上既然专门介绍了还是写一写，加深一下印象。

《angularjs指令的学习》

《angularjs指令的学习》

《angularjs指令的学习》

当设置replace为true时，模板中的内容替换指令为标记，这是书上的说法，我觉得说的不太明白，看图一下就懂了。

transclude

将视图模板（Template或TemplateUrl）替换到指定位置的视图（Restrict），
transclude与replace有一些相似之处，因此拿他们对比一下

《angularjs指令的学习》

<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset="utf-8">
    <title>My AngularJS App</title>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular.min.js"></script>
    <script src="http://sandbox.runjs.cn/uploads/rs/376/pbcx3e1z/angular-route.min.js"></script>
</head>

<body>
<hello>
    <br/>
    <span>原始的内容，</span><br/>
    <span>还会在这里。</span>
</hello>

<br>

<hello1>
    <br/>
    <span>原始的内容1，</span><br/>
    <span>还会在这里1。</span>
</hello1>
<br>

<script>
    var appModule = angular.module('app', []);
    appModule
        .directive('hello', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there :transclude: true' +
                    '<span ng-transclude></span></div>,',
                transclude: true
                /*把<hello>标签替换成我们所编写的HTML模板，
                但是<hello>标签内部的内容保持不变。*/
            };
        })
        .directive('hello1', function () {
            return {
                restrict: 'E',
                template: '<div>Hi there 1 :transclude: false' +
                    '<span ng-transclude></span></div>',
                transclude: false
            };
        })
</script>
</body>
</html>

《angularjs指令的学习》

简单明了。

（引用于该博客https://blog.csdn.net/sinat_3…）

link

link就是一个函数

《angularjs指令的学习》
scope参数表示作用域，element表示指令中的元素，可以通过内置的jqLite调用，jqLite是一个压缩版的jQuery，attrs参数表示指令元素的属性集合，通过这个可以获取元素中的各种属性。

compaile

没搞太懂，又因为不常用就不细说了。

scope

scope是指令中一个很强大也很常用的属性
scope属性包含两种类型，一种是布尔值，另一种是json对象。

scope是布尔值

scope属性自定义指令时默认值就是布尔类型的，初始值为false，指令中的作用域就是指令元素所在的作用域两者是相同的。如果scope为true，则表示独立创建，，当他的内容发生变化时并不会修改父作用域的内容。

scope是对象

如果scope是对象，那么父作用域与子作用域是完全独立的，不存在任何关联。如果要用父作用域的属性和方法需要在scope属性对应的json对象中添加绑定策略：
@ ：把当前属性作为字符串传递，你还可以绑定来自外层scope的值，在属性值中插入双括号即可，此方法是单项绑定；

= ：与父scope中的属性进行双向绑定

& ：传递来自父scope的函数，稍后再调用.

requeire和controller

当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性。
关于这个，看到一篇讲解很好的文章：https://my.oschina.net/u/2342…

    原文作者：笙歌会停
    原文地址: https://segmentfault.com/a/1190000016397981
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞