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>

　　这里给到自由男人的图解

　　

　　可以发现，这两个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>

　　这里给个比较复杂的图。

　　

　　 这里存在三种情况：（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:{}
            }
        })

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

　　

四、我不想要太自由

　　有些时候我们并不希望太过自由，我们希望有那么一个人去叮嘱你，也希望有那么一个人可以倾诉。彻底的自由可能会让人手足无措。感谢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方法的，但是它从控制器得到了这个方法，所以可以在指令中使用了。

　　或许你会问一个问题，为什么没有从指令到控制器的单向数据流呢？我也不知道哦。

四、总结一下

　　本文主要讲解了控制器作用域和指令作用域的关系。我们从控制器与指令作用域完全一样，到指令拥有自己的作用域，到指令作用域与控制器作用域完全分离，再到隔离作用域与控制器作用域的通信，比较清楚的理清了控制器作用域和指令作用域的复杂的情感纠葛。

时间： 2024-10-19 02:03:06

AngularJS1.X学习笔记10-自定义指令（下）的相关文章

AngularJS1.X学习笔记8-自定义指令（上）

AngulaJS的指令是一种非常强大的特性,一个ng-repeat就能让我们非常方便的展示一个数据列表,指令相当于是一个组件,为我们将一些东西封装起来了,提供了复用的可能性.个人认为自定义指令还是比较复杂的,下面开始攻关. 一.三个重要参数 <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> &l

AngularJs学习笔记3——自定义指令

指令 概述: 前面也说过一些常用指令,用于快速入门.现在详细总结一下:指令用于实现各种页面的操作,是对于底层DOM操作的封装,扩展了HTML的行为,实现页面交互以及数据绑定. 指令是一种执行的信号,一旦发布了指令,就要执行某项动作.就像我们军训的时候,一个口令一个动作.而常用的指令是固定的,如果我们有一些特殊的需要,这时候要自定义指令,没有条件就要自己创造条件嘛. 基本语法: var app=angular.module('myApp',[ ]); app.directive(name,fn);

angularJS1笔记-(10)-自定义指令(templateUrl属性)

index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div ng-app="myApp"> <script type="text/ng-template" id="customTags2"&

AngularJS1.X学习笔记9-自定义指令（中）

今天好大的雨啊!上一节中,我们的指令中的工厂函数中都是返回了一个叫做链接函数的工人函数,事实上我们的工厂函数也是可以返回一个对象,这个对象里面可以包含很多的属性,这使得我们可以创建更加强大的指令. 一.link属性 这个属性的值是一个函数,叫做链接函数. <!DOCTYPE html> <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"

《ASP.NET MVC 4 实战》学习笔记 10：路由(下)

六.调试路由: 1.安装Route Debugger: 在NuGet包管理器控制台输入: install-package routedebugger 2.使用Route Debugger: 一旦安装了Route Debugger对RouteDebugger.dll的引用便被添加到项目中,web.config也会添加一条新的应用程序设置: <add key="RouteDebugger:Enabled" value="true" /> 注:在部署应用程序之

angular学习笔记(三十)-指令(10)-require和controller

本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐directive> <inner‐directive></inner‐directive> </outer‐directive> 这里有两个指令,一个outer-directive指令元素,它里面又有一个inner-directive指令元素. js: app.directiv

jQuery学习笔记10：Ajax技术

jQuery 库拥有完整的 Ajax 兼容套件.其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据. jQuery 采用了三层封装:最底层的封装方法为:$.ajax(),而通过这层封装了第二层有三种方法:.load().$.get()和$.post(),最高层是$.getScript()和$.getJSON()方法. 函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个

shiro学习笔记_0600_自定义realm实现授权

博客shiro学习笔记_0400_自定义Realm实现身份认证 介绍了认证,这里介绍授权. 1,仅仅通过配置文件来指定权限不够灵活且不方便.在实际的应用中大多数情况下都是将用户信息,角色信息,权限信息 保存到了数据库中.所以需要从数据库中去获取相关的数据信息.可以使用 shiro 提供的JdbcRealm来实现,,也可以自定义realm来实现.使用jdbcRealm往往也不够灵活.所以在实际应用中大多数情况都是自定义Realm来实现. 2,自定义Realm 需要继承 AuthorizingRea

lua学习笔记10：lua简单命令行

前面多次用了命令行,这次就好好学下命令行: 一 格式 lua [options][script][args] 二 具体命令 -e 直接将命令传个lua -l 加载一个文件 -i 进入交互模式 例如,终端输入: lua -e "print(math.sin(12))" lua学习笔记10:lua简单命令行,布布扣,bubuko.com