angularJs-浅谈directive里面的隔离作用域

最新推荐文章于 2020-03-10 21:12:21 发布

Charles_pig

最新推荐文章于 2020-03-10 21:12:21 发布

阅读量1.1k

点赞数 1

分类专栏： angularJs 文章标签： angular

本文链接：https://blog.csdn.net/Charles_pig/article/details/73799711

版权

angularJs 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

什么是scope

我们在使用angular的时候，当我们定义ng-app的时候，就产生了一个作用域，只不过是ng-app所产生的作用域是根作用域，它是所有$scope的最顶层；除了ng-app能够产生作用域，如ng-controller, ng-repeat,factory and service,directive都能产生作用域，作用域有层次结构，这个层次和相应的DOM几乎是一样的，它能监控表达式和传递事件；

下面我们谈谈directive里面的scope以及“@”，“=”，“&”。

虽然directive自己产生了scope,但是在开发中我们需要和ng-controller换句话说和外界进行交互和数据传递，那么，如何实现此类的操作呢，通过“@”，“=”，“&”能够实现此类操作，下面我们具体解释下它们各自的用处以及实现方式：
1.“@”：单项数据绑定，里面传递的字符串；
2.“=”：双向数据绑定，顾名思义，我们能够实现更多交互，我们可以在里面传递变量；
3.“&”：通过&属性名来调用控制器的函数；

实例：

<html ng-app="myApp" >  
<head>  
  <title>The factoryAndService of angularJs</title>  
</head>  
<body>  
  <h2>AngularJS`Scope</h2>  
  <div ng-controller="myCtrl">  
    <input type="text" ng-model = "color"/>
    <div my-div my-color = "color"></div>
  </div>   
    <script src="angular.min.js"></script>
    <script src="angular-route.min.js"></script>
    <script src="angular-ui-router.min.js"></script>
  <script>  
      var myApp = angular.module("myApp",[]);
      myApp.directive("myDiv",function(){
        return{
            restrict:"AEC",
            template:"{{color}}<h2 style ='color:{{color}}'>hello Word</h2><input type='text' ng-model = 'color'/>",
            scope:{
                color:"=myColor",
            }
        }
      })
      myApp.controller("myCtrl",["$scope",function($scope){
        $scope.color = "red" ;
      }])
  </script>  
</body>  
</html>

难点：

这段代码主要是针对“=”：双向数据绑定进行的实例展示，同学们在学习的时候，主要着重理解三个表达的意思和用处，和如何与ng-contrller进行传值的，以及directive里面的scope是如何接受到这个值得，表达式怎么规范的也需要童鞋们着重记一下，加深理解

浏览器显示

![这里写图片描述](https://img-blog.csdn.net/20170627150407030?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ2hhcmxlc19waWc=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

Charles_pig

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularJs-浅谈directive里面的隔离作用域

什么是scope我们在使用angular的时候，当我们定义ng-app的时候，就产生了一个作用域，只不过是ng-app所产生的作用域是根作用域，它是所有$scope的最顶层；除了ng-app能够产生作用域，如ng-controller, ng-repeat,factory and service,directive都能产生作用域，作用域有层次结构，这个层次和相应的DOM几乎是一样的，它能监控表达式和
复制链接

扫一扫