软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> AngularJS中的scope($scope) -> 正文阅读

[Web前端]AngularJS中的scope($scope)


A.单/双向绑定
单向绑定:ng-bing=”nickname”,双向绑定:ng-model=”nickname”
B.指令继承控制器的作用域
index.html
<!DOCTYPE html>
<html ng-app="labApp">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/lib/angular.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div ng-controller="defaultCtrl">
            <p id="one" lab-input></p>
            <p id="two" lab-input></p>
        </div>
    </body>
</html>

app.js
angular
    .module("labApp",[])
    .controller('defaultCtrl',function($scope){
        $scope.nickname="xiaofanku";
    })
    .directive('labInput',function(){
        return {
            template:'<p><input type="text" ng-model="nickname" /></p>'
        };
    });

总结:
1.指令从控制器中继承了控制器中定义的变量:nickname
[img]http://img.blog.csdn.net/20160331170451908
2.两个指令中的nickname都是同步的
[img]http://img.blog.csdn.net/20160331170504908
C.指令使用自已/实例的作用域
app.js
 angular
    .module("labApp",[])
    .controller('defaultCtrl',function($scope){
        $scope.nickname="xiaofanku";
    })
    .directive('labInput',function(){
        return {
            //新增的
            controller:function($scope){
                $scope.nickname="pktmandy";
            },
            template:'<p><input type="text" ng-model="nickname" /></p>'
        };
    });

总结:
1.不再使用控制器(defaultCtrl)中的变量:nickname,而是使用指令控制器中声明的:nickname
[img]http://img.blog.csdn.net/20160331170647753
app.js
angular
    .module("labApp",[])
    .controller('defaultCtrl',function($scope){
        $scope.nickname="xiaofanku";
    })
    .directive('labInput',function(){
        return {
            //新增的
            scope:true,
            controller:function($scope){
                $scope.nickname="pktmandy";
            },
            template:'<p><input type="text" ng-model="nickname" /></p>'
        };
    });

总结:
1.两个指令都有各自的实例:nickname
[img]http://img.blog.csdn.net/20160331170828144
D.指令中的隔离作用域
app.js
angular
    .module("labApp",[])
    .controller('defaultCtrl',function($scope){
        $scope.nickname="xiaofanku";
    })
    .directive('labInput',function(){
        return {
            scope:{},
            template:'<p><input type="text" ng-model="nickname" /></p>',
            link:function(scope,element,attrs){
                scope.$watch('nickname',function(v){
                    console.log('current nickname:'+v);
                });
            }
        };
    });

输入顺序:
1.选中部分的上部分为:第一个input输入
2.选中部分的为:第二个input输入
3.选中部分的下部分为:在2后接着在第一个input中输入的
[img]http://img.blog.csdn.net/20160331171010129
E.连接指令隔离作用域和控制器(defaultCtrl)中的作用域
E.1: 从defaultCtrl中到labInput的单向绑定:@
index.html
<!DOCTYPE html>
<html ng-app="labApp">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/lib/angular.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div ng-controller="defaultCtrl">
            <p id="one" lab-input nickname="{{nickname}}"></p>
            <p id="two" lab-input></p>
        </div>
    </body>
</html>

app.js
angular
    .module("labApp",[])
    .controller('defaultCtrl',function($scope){
        $scope.nickname="xiaofanku";
        $scope.$watch('nickname',function(v){
            console.log('controller current nickname:'+v);
        });
    })
    .directive('labInput',function(){
        return {
            scope:{
                nickname:'@'
            },
            template:'<p><input type="text" ng-model="nickname" /></p>',
            link:function(scope,element,attrs){
                scope.$watch('nickname',function(v){
                    console.log('directive current nickname:'+v);
                });
            }
        };
    });

[img]http://img.blog.csdn.net/20160331171312318
[img]http://img.blog.csdn.net/20160331171330958
E.2:从defaultCtrl中到labInput的之间的双向绑定:=
[img]http://img.blog.csdn.net/20160331171502553
改动的地方(app.js)1:
把E.1中的@替换为=
改动的地方(index.html)2:
        <div ng-controller="defaultCtrl">
            <p id="one" lab-input nickname="nickname"></p>
            <p id="two" lab-input></p>
        </div>

如果还是使用{{}}会报以下错误:
[img]http://img.blog.csdn.net/20160331171615569
总结:
此时如果在input中改变值可以看到控制器和指令的watch都有输出
[img]http://img.blog.csdn.net/20160331171655413
E.3 从指令(labInput)中调用控制器(defaultCtrl)中的行为:&
index.html
<!DOCTYPE html>
<html ng-app="labApp">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/lib/angular.js"></script>
        <script src="js/app.js"></script>
    </head>
    <body>
        <div ng-controller="defaultCtrl">
            <p id="one" lab-input nickname="nickname" re-action="reverse()"></p>
            <p id="two" lab-input></p>
        </div>
    </body>
</html>

app.js
angular
    .module("labApp",[])
    .controller('defaultCtrl',function($scope){
        $scope.nickname="xiaofanku";
        $scope.reverse=function(){
            $scope.nickname=$scope.nickname.split("").reverse().join("");
        };
        $scope.$watch('nickname',function(v){
            console.log('controller current nickname:'+v);
        });
    })
    .directive('labInput',function(){
        return {
            scope:{
                nickname:'=',
                reAction:'&'
            },
            template:'<p><input type="text" ng-model="nickname" ng-click="reAction()" /></p>',
            link:function(scope,element,attrs){
                scope.$watch('nickname',function(v){
                    console.log('directive current nickname:'+v);
                });
            }
        };
    });

总结:
载入成功后,点击输入框会显示如下
[img]http://img.blog.csdn.net/20160331171844601
......显示全文...
    点击查看全文


上一篇文章      下一篇文章      查看所有文章
2016-04-01 16:48:17  
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 美食菜谱 新闻资讯 电影视频 小游戏 Chinese Culture
生肖星座 三丰软件 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 美图 中国文化英文版 多播 租车 短信
2017-7-26 10:40:22
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --