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>

  这里要用随意男人的例子来详细说明一下:

<!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方法的,但是其从控制器得到了这艺术,所以可以在命令中采用了。

  或许你会咨询一个题材,为什么没自命到控制器的只有为数据流呢?我哉未亮啊。

季、总结一下

  本文主要教学了控制器作用域和指令作用域的涉。我们打控制器和指令作用域完全平等,到令拥有和谐的作用域,到令作用域与控制器作用域完全分离,再届断作用域与控制器作用域的通信,比较清楚的调理清矣控制器作用域和指令作用域的复杂的情丝纠葛。

相关文章