AngularJS自定义指令directive：父类scope和指令中scope之间的通信

最新推荐文章于 2020-04-28 18:41:41 发布
最新推荐文章于 2020-04-28 18:41:41 发布
阅读量1.9k 收藏
点赞数
分类专栏： 前端 文章标签： angularjs 继承 class 通信
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stsshenwei/article/details/68969526
版权

我们知道angularJs中，指令中有scope，父类controller中也有scope，两者的通信方式有三中，分别是

  1. scope：false；直接使用父类的scope
  2. scope：true；继承父类的scope
  3. scope：｛@，=，&｝隔离的scope

但是1和2两种都有一定的缺陷，（1）直接使用父类，也就是在指令中也可以任意修父类的对象，这样使得父类对象被各种指令所修改。（2）继承父类，如果是对象传递到指令中，则可以直接造成父类的对象也修改，但是如果直接只是一个字符串，则父类的不会被修改。这个虽然比1种情况好一点，但是对于一个指令被用于多个位置的时候，项目中希望的是有些对象被修改，有些对象不会被修改。怎么样才能达到修改自如的情况，一般使用的是3种情况的scope，即隔离的scope。那么第3种情况，怎么实现传递字符串和传递对象。

1.最简单的scope

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo22.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body ng-app="app">
    <div ng-controller="controller"> 
        hello:{{name}}
        <!--<hello body="name"></hello>
    --></div>
    <script>
        var app = angular.module("app", []);
        app.controller("controller", function($scope){
            $scope.name = "hello";
        });
    </script>
  </body>
</html>

结果是hello

2.带指令的传递字符串的scope用的是@

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo22.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body ng-app="app">
    <div ng-controller="controller"> 
        hello:{{name}}
        <hello body="{{name}}"></hello>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller("controller", function($scope){
            $scope.name = "hello";
        });
        app.directive("hello", function(){
            return{
                restrict:"ECMA",
                template:'<div>指令中的name: {{body}}</div>',
                scope:{
                    body:'@'
                },

            }
        })
    </script>
  </body>
</html>

结果是：
hello：hello
指令中的name:hello

3.在指令中修改字符串

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo22.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body ng-app="app">
    <div ng-controller="controller"> 
        hello:{{name}}
        <hello body="{{name}}"></hello>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller("controller", function($scope){
            $scope.name = "hello";
        });
        app.directive("hello", function(){
            return{
                restrict:"ECMA",
                template:'<div>指令中的name: {{body}}</div>',
                scope:{
                    body:'@'
                },
                link : function(scope, elements, attrs, controller){ 
                    console.log(scope.body);
                    scope.body = "bbb";
                } 
            }
        })
    </script>
  </body>
</html>

结果是：
hello：hello
指令中的name:hello
结果还是一样的，说明@仅仅知识字符串的传递，在指令中修改scope不会对父类的scope字符串产生影响。

4.带指令的传递对象的scope用的是=

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo22.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body ng-app="app">
    <div ng-controller="controller"> 
        hello:{{name.age}}
        <hello body="name"></hello>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller("controller", function($scope){
            $scope.name = {age:"hello"};
        });
        app.directive("hello", function(){
            return{
                restrict:"ECMA",
                template:'<div>指令中的name: {{body.age}}</div>',
                scope:{
                    body:'='
                },

            }
        })
    </script>
  </body>
</html>

结果是：
hello：hello
指令中的name:hello
5.指令中修改对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo22.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="js/jquery-1.4.3.js"></script>
    <script type="text/javascript" src="js/angular.min.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>

  <body ng-app="app">
    <div ng-controller="controller"> 
        hello:{{name.age}}
        <hello body="name"></hello>
    </div>
    <script>
        var app = angular.module("app", []);
        app.controller("controller", function($scope){
            $scope.name = {age:"hello"};
        });
        app.directive("hello", function(){
            return{
                restrict:"ECMA",
                template:'<div>指令中的name: {{body.age}}</div>',
                scope:{
                    body:'='
                },
                link : function(scope, elements, attrs, controller){ 
                    console.log(scope.body);
                    scope.body.age = "bbb";
                } 
            }
        })
    </script>
  </body>
</html>

结果是：
hello：bbb
指令中的name：bbb。

 总结：
 如果选择隔离的scope，对上述的用法理解了，基本上你也知道怎么使用隔离的scope了。
Dear_tuffy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angular 子元素访问父元素的$scope
weixin_34115824的博客
07-07 405
2019独角兽企业重金招聘Python工程师标准>>> ...
angular笔记 directive scope 调用父scope带参数方法
ft6302244的专栏
03-23 1万+
在使用angular directive的时候，为了不污染环境，我们为给directive自己一个scope,如果这个scope需要使用父类中scope的对象，会使用 = & @三种标示,在开发项目中，我遇到需要调用父类带参数方法的情况，自然而然我想到了使用 &标示符，可是如何进行带参数传递呢? 成功代码: script: angular.module('docsIsoFnBindExamp
angular指令中的scope的详解
weixin_33984032的博客
08-23 148
scope参数值 scope参数是可选的，默认值为false，可选true、对象{}； false：共享父域 true：继承父域，且新建独立作用域 对象{}：不继承父域，且新建独立作用域 scope参数false 本质：子域与父域共享作用域。 特点：父域修改parentName的同时，指令绑定的parentName的元素会被刷新。 反之，指令内部parentName被修改...
angularJs自定义指令父子指令通信
martsforever的博客
12-29 4936
老规矩，先上效果图：首先说一下本文的重点：1、父指令如何调用子指令中的方法；2、子指令如何调用父指令中的方法；（都不是通过广播的方式）如果有同学还不知道父指令如何通过=@&给子指令传递参数，或者一些其他自定义指令的属性（scope、complie、link……）的话，请查阅官网文档发或者其他文档博客。前言： 在自学了一段时间VUE之后，被VUE简洁的代码以及强大的解耦能力深深折服，所有的界面元素都
angularJS中directive与directive 之间的通信
dc1339485的博客
12-25 135
上一篇讲了directive与controller之间的通信；但是我们directive与directive之间的通信呢？ 当我们两个directive嵌套使用的时候怎么保证子directive不会被父directive替换覆盖；及当子directive需要用到父directive中controller某个变量或者方法的时候 怎么实现两个directive之间的通信的。 这里主要讲...
Angularjs自定义指令Directive详解
10-19
Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识，感兴趣的朋友一起学习吧
AngularJS 自定义指令详解及实例代码
10-21
-- directive:xingoo -->`（在AngularJS 1.2版本中可能不可用） 如果需要在自定义指令内部嵌套其他HTML元素，可以使用`transclude`属性。当`transclude`设置为`true`时，可以将内容插入到指定位置。例如： ```...
详解angularJS自定义指令间的相互交互
01-19
AngularJS 自定义指令 transclude：当元素标签需要嵌套时使用，与ng-transclude配合使用。默认值为false不能使用嵌套，true为可以使用嵌套。在哪个标签上使用ng-transclude就在哪个标签内进行嵌套。 代码示例：...
关于Angularjs中自定义指令一些有价值的细节和技巧小结
10-18
在AngularJS中，自定义指令是扩展HTML能力的关键特性，允许开发者创建强大的组件化功能。以下是对自定义指令的一些重要细节和技巧的深入探讨。 首先，我们来看一下自定义指令的基本结构。创建自定义指令通常涉及到`...
angularjs的自定义directive指令的绑定策略scope:”@”、”=”、”&”
巴黎的妖
08-24 6191
通常我们知道指令默认是可以跟外界通信的. 比如: <div ng-controller="mytest">      test自定义指令是可以访问到mytest控制器的scope 要想把test自定义指令独立作用域,也就是说跟mytest切断关系:可以加
AngularJS自定义指令directive：scope属性
热门推荐
VitaLemon__的专栏
08-15 2万+
一、介绍：在AngularJS中，除了内置指令如ng-click等，我们还可以自定义指令。自定义指令，是为了扩展DOM元素的功能。代码中，通过指定directive中的restrict属性，来决定这个指令是作为标签（E）、属性（A）、属性值（C）、还是注释（M）。指令的定义过程就不详述了，可以参考：https://docs.angularjs.org/guide/directive。 在这篇博客中
angularJs中controller控制器scope父子集作用域实例
泠泠似水
06-05 2763
1.ctrl1是父级控制器，ctrl2和ctrl3都是ctrl1的子级控制器， 2.父级ctrl1中name值的改变会影响ctrl2和ctrl3中name值的改变， 3.但是ctrl2有自己的name输入传的值，不会影响ctrl1和ctrl3，这就是继承隔离， 4.ctrl3无name赋值就继承父级ctrl1中的name的值。一、继承隔离的情况<div ng-app="module">
Angular directive父子组件之间通讯
chunchagui0866的博客
09-21 299
多层Angular Directive自定义组件之间可以使用$emit向父directive传值，也可以通过$broadcast向同级指令传值 $scope.$emit('eventName','param1','param2'..); //向父directive 发起事件 $sco...
AngularJs 自定义指令中的Scope属性
william_n的博客
04-28 3208
1.应用场景 了解AngularJs 自定义指令中的Scope属性的用法. 2.学习/操作 一、概念说明 　　可以是true、 false 、哈希对象 {} 　　1、true 　　　　新创建了一个作用域，且继承了父作用域；在初始化的时候，用了父作用域的属性和方法去填充我们这个新的作用域。它和父作用域不是同一个作用域。 　　2、false 默认（不指定...
Angular JS中scope的作用域
Gin
02-21 1226
每当一个指令被创建的时候，都会有这样一个选择，是继承自己的父作用域（一般是外部的Controller提供的作用域或者根作用域（$rootScope）），还是创建一个新的自己的作用域，当然AngularJS为我们指令的scope参数提供了三种选择，分别是：false,true,{}；默认情况下是false。 scope = false 首先我们来看一下，当scope参数被设置为false时有什么
关于AngularJS controller之间的数据通信
小白变怪兽
03-20 3210
angular controller通信
angularjs指令中的scope引用父作用域的函数，如何传递参数
weixin_33881140的博客
05-24 406
2019独角兽企业重金招聘Python工程师标准>>> ...
angularJS中directive与controller之间的通信
xiaoshengjinbu的博客
10-11 194
当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候，是怎么样进行通讯呢？ 这里介绍3种angular自定义directive与controller通信的指令。 1.指令作用域中的"@" 作用：把当前属性作为字符串传递实现指令与html页面元素关联。 <!DOCTYPE html> <html ng-app="demoapp"&g...
Angular指令中作用域（scope）详解
岁月如歌，江山如画
06-05 3651
附言：先说下指令吧，指令在创建的的时候，自带作用域属性（scope），一般情况下为false，  会成为调用者的controller的子作用域；如果自己想独立出来，有另外两种选择，scope为true，或{}         Scope：false ；子作用域，继承父作用域的属性及方法（双向的）         Scope：true；独立作用域，创建新的继承父作用域（单向的）         Sc...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值