AngularJS1.X读书笔记10-自定义指令(下)

  继续持续,学完那一个局地就去用餐。引用自由男人的话当做本文的始发:“默认境况下,链接函数被传播了控制器的功能域,而该控制器管理着的视图包罗了命令所选取到的要素”。果然像是绕口令,仍然看看您的例证相比较好。

一、在一个控制器中选取相同指令

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>scope1</title>
</head>
<body ng-controller="directiveCtrul">
    <get-data></get-data>
    <get-data></get-data>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){

        })
        .directive("getData",function(){
            return {
                template:"<div><input type='text' ng-model='name'/></div>"
            }
        })
    </script>
</body>
</html>

  那里给到自由男人的图解

  图片 1 

  可以发现,那四个directive是公私一个成效域的,所以说那八个文本框会保持同步状态。

二、我要的是做自我要好

  如何才能是一个命令多次用到不相互影响呢?首个想法是将他们放到分化的控制器,可是一旦您即便想将它放到一个控制器中呢?scope:true就ok了

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>scope2</title>
</head>
<body ng-controller="directiveCtrul">
    <get-data></get-data>
    <get-data></get-data>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){

        })
        .directive("getData",function(){
            return {
                template:"<div><input type='text' ng-model='name'/></div>",
                scope:true
            }
        })
    </script>
</body>
</html>

  那里仍旧用随意男人的事例来详细说爱他美(Aptamil)(Beingmate)下:

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>scope2</title>
</head>
<body ng-controller="directiveCtrul">
    <get-data></get-data>
    <get-data></get-data>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.data = {name:"Adam"};
            $scope.city = "London"
        })
        .directive("getData",function(){
            return {
                template:"<div>name:<input type='text' ng-model='data.name'/></div>"+
                        "<div>city:<input type='text' ng-model='city'/></div>"+
                        "<div>country:<input type='text' ng-model='country'/></div>",
                scope:true
            }
        })
    </script>
</body>
</html>

  那里给个比较复杂的图。

  图片 2

   那里存在三种情景:(1)定义在一个目标上(data.name):被命令共享

`           (2)直接定义在scope上(city):被下令共享,不过当用ng-model后会重建一个

           
 (3)没有概念,动态创设(country):修改是创造,各类指令的没什么

 

 三、拥抱自由

  将scope置为true已经很随便了,可是,依然有局地质量会被指令共享,有没有一种方法让指令彻底翻身呢?有的。

  

directive("getData",function(){
            return {
                template:"<div>name:<input type='text' ng-model='data.name'/></div>"+
                        "<div>city:<input type='text' ng-model='city'/></div>"+
                        "<div>country:<input type='text' ng-model='country'/></div>",
                scope:{}
            }
        })

  那下我们的下令完全解放了。看看自由男人给的图

  图片 3

四、我不想要太随意

  有些时候我们并不愿意太过自由,大家盼望有那么一个人去叮嘱你,也目的在于有那么一个人可以倾诉。彻底的人身自由可能会令人慌慌张张。感谢Angular,那总体他都为大家贯彻了。

  (1)找一个得以叮嘱的人

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>scope4</title>
</head>
<body ng-controller="directiveCtrul">
<input type="text" name="" ng-model="data.name">


    <div get-data nameprop="{{data.name}}"></div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.data = {name:"Adam"};
            $scope.city = "London"
        })
        .directive("getData",function(){

            return {
                template:"<div>{{local}}</div>",
                scope:{local:"@nameprop"}
            }
        })
    </script>
</body>
</html>

  按理将,我创立了一个隔离功用域,他应有是控制器的数码没啥关系的,然则呢,我们让它有关联了,控制器的多寡会单向留到指令中,指令的数据却不会到控制器中。为了验证指令的数量不会潜移默化控制器的数目,我想改造一下上面的例子。

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>scope4</title>
</head>
<body ng-controller="directiveCtrul">
<div>我是控制器中的:<input type="text" name="" ng-model="data.name"></div>



    <div get-data nameprop="{{data.name}}"></div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.data = {name:"Adam"};
            $scope.city = "London"
        })
        .directive("getData",function(){

            return {
                template:"<div>指令中:{{local}}</div>"+
                "我是指令中的:<input type='text' ng-model='data.name'> ",
                scope:{local:"@nameprop"}
            }
        })
    </script>
</body>
</html>

  大家发现在自我是指令中的那一个文本框输入不会影响自身是控制器中的数据。那是一种单向数据流,可以从决定器留到指令,反之则不可以。

  (2)找一个既可以倾诉又足以叮嘱你的人

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>scope4</title>
</head>
<body ng-controller="directiveCtrul">
<div>控制器:{{data.name}}</div>
<div>我是控制器中的:<input type="text" name="" ng-model="data.name"></div>



    <div get-data nameprop="data.name"></div>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.data = {name:"Adam"};
            $scope.city = "London"
        })
        .directive("getData",function(){

            return {
                template:"<div>指令:{{local}}</div>"+
                "我是指令中的:<input type='text' ng-model='local'> ",
                scope:{local:"=nameprop"}
            }
        })
    </script>
</body>
</html>

 

 

  那里创办了一个控制器和下令之间的双向数据流,控制器中的变化能够影响指令,指令中的变化也得以影响控制器。

  (3)取得控制器中的函数

  

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>scope1</title>
</head>
<body ng-controller="directiveCtrul">
    <get-data show="show()"></get-data>

    <script type="text/javascript" src="../node_modules/angular/angular.min.js"></script>
    <script type="text/javascript">
        angular.module('myApp',[])
        .controller('directiveCtrul',function($scope){
            $scope.show = function(){
                alert("hello");
            }
        })
        .directive("getData",function(){
            return {
                template:"<button ng-click=show()>我是指令中的按钮</button>",
                scope:{
                    show:"&show"
                }
            }
        })
    </script>
</body>
</html>

  那些事例里,大家的吩咐是绝非一个show方法的,可是它从控制器得到了那一个方法,所以能够在指令中应用了。

  或许你会问一个难点,为何向来不从指令到控制器的单向数据流呢?我也不明了啊。

四、统计一下

  本文主要讲解了控制器效率域和指令成效域的关联。我们从控制器与指令成效域完全一样,到指令拥有自己的成效域,到指令作用域与控制器作用域完全分离,再到隔离功效域与控制器成效域的通讯,比较清楚的理清了控制器功能域和下令效用域的繁杂的情愫纠葛。

相关文章