软件世界网 购物 网址 三丰软件 | 小说 美女秀 图库大全 游戏 笑话 | 下载 开发知识库 新闻 开发 图片素材
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
移动开发 架构设计 编程语言 Web前端 互联网
开发杂谈 系统运维 研发管理 数据库 云计算 Android开发资料
  软件世界网 -> Web前端 -> AngularJS中的scope($scope) -> 正文阅读
Web前端 最新文章
10分钟
SSM框架SSM项目源码SSM源码下载java框架整合
javascript入门
JavaScript常用对象Array(2)
8.Smarty3:模版中的内置函数
表单脚本
iTextSharp5.0页眉页脚及Asp.net预览的实现
MVC基础学习—理论篇
JavaScript
http协议中get与post区别详解

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

  2016-04-01 16:49:05

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

2.两个指令中的nickname都是同步的

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

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

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中输入的

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);
                });
            }
        };
    });



E.2:从defaultCtrl中到labInput的之间的双向绑定:=

改动的地方(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>

如果还是使用{{}}会报以下错误:

总结:
此时如果在input中改变值可以看到控制器和指令的watch都有输出

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);
                });
            }
        };
    });

总结:
载入成功后,点击输入框会显示如下

上一篇文章      下一篇文章      查看所有文章
2016-04-01 16:48:17  
360图书馆 论文大全 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频 装修知识库
2017-1-22 16:06:39
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  软件世界网 --