AngularJS【AngularJS】—— 1二 独立成效域

style=”font-size: 一三px; color: #000080;”>前边通过摄像学习掌握了命令的概念,这里上学一下限令中的成效域的相关内容。

style=”font-size: 一3px; color: #000080;”>通过单独成效域的两样绑定,能够兑现更具适应性的自定义标签。借由差别的绑定规则绑定属性,从而定义出符合更加多选拔场景的标签。

style=”font-size: 一三px; color: #000080;”>本篇将会总计上边包车型客车内容:

  1怎么供给独自功用域

  贰怎么实现独立成效域

  三功用域的数额绑定

style=”font-size: 一三px;”>在此以前有部分不当,是由于replace拼写错误导致的。

style=”font-size: 13px;”>拼写正确后,网络好友发觉报错,不能够平常办事。这是因为模板中设有单标签<br>,导致模板不可能正确解析~

style=”font-size: 1三px;”>再度多谢博友们建议的荒谬!

独立作用域的功能

  为了便利通晓,先看一下底下这几个事例:

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>

        <div ng-controller="MainController">
            <xingoo></xingoo>
            <xingoo></xingoo>
            <xingoo></xingoo>
        </div>

        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule
            .controller('MainController', function($scope){

            })
            .directive("xingoo",function(){
                return {
                    restrict:'AE',
                    template:'<div><input type="text" ng-model="username"/>{{username}}</div><br>'
                };
            });
        </script>
    </body>
</html>

  能够观察,在script中,创立了八个发令,该指令完成了2个自定义的标签。

  标签<xingoo></xingoo>的法力是
替换来 一个输入框和二个数据展现。

  那样就会冒出上边包车型地铁功用:

AngularJS 1

  分析:

  当大家安危与共制造有些指令时,那么些命令料定不容许只行使二次,是要再一次多次选拔的,有的在三个页面内照旧一个调整器内供给动用频仍。

  类似上边的那种现象,在任何三个输入框内部管理体制革新变多少,都会导致别的的价签内的数额一起产生更改,那显明不是大家想要的。

  这一年就供给单独功效域了。

 

什么样贯彻独立成效域

  上边看看独立效用域的效果:

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>

        <div ng-controller="MainController">
            <xingoo></xingoo>
            <xingoo></xingoo>
            <xingoo></xingoo>
        </div>

        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule
            .controller('MainController', function($scope){

            })
            .directive("xingoo",function(){
                return {
                    restrict:'AE',
                    scope:{},//scope=true,
                    template:'<div><input type="text" ng-model="username"/>{{username}}</div><br>'
                };
            });
        </script>
    </body>
</html>

  只需求在概念指令时,加多scope:{}那个个性,就足以使标签具有和谐的功效域。

  仅仅是增多那1行代码而已,就兑现了独立作用域。

  在进展输入时,每个模板内选择本人的数额,不会互相困扰。

AngularJS 2

 

成效域数据绑定  

  自定义标签或许拓展扩大时,会有这样的供给意况,要在标签中增添壹些质量,实现部分繁杂成效。

  关于这一个属性,独立效用域是怎么的做的吗?看看下边包车型地铁始末吧。

  举个例证:

<xingoo say="name"></xingoo>
<xingoo say="name()"></xingoo>

  假使传入的是上面那种,我们什么样区分它传到的到底是变量呢?依旧字符串呢?依然艺术吗?

  因而AngularJS有了二种自定义的功能域绑定格局:

  一 基于字符串的绑定:使用@操作符,双引号内的始末作为字符串进行绑定。

  二 基于变量的绑定:使用=操作符,绑定的内容是个变量。

  3 基于方法的绑定:使用&操作符,绑定的剧情时个艺术。

基于字符串的绑定@:

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>

        <div ng-controller="MainController">
            <xingoo say="test string"></xingoo>
            <xingoo say="{{str2}}"></xingoo>
            <xingoo say="test()"></xingoo>
        </div>

        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule
            .controller('MainController', function($scope){
                $scope.str1 = "hello";
                $scope.str2 = "world";
                $scope.str3 = "angular";
            })
            .directive("xingoo",function(){
                return {
                    scope:{
                        say:'@'
                    },
                    restrict:'AE',
                    template:"<div>{{say}}</div>",
                    replace:true
                };
            });
        </script>
    </body>
</html>

  看一下代码,在body中采纳了三次自定义的标签,每个标签的当中有一个say的质量,这几个天性绑定了叁个双引号的字符串。

  在命令的定义中,加多了scope:{say:’@’}这么些键值对品质,也正是说,angular会识别say所绑定的事物是2个字符串。

  在模板中,使用表明式{{say}}输出say所代表的内容。

AngularJS 3

  能够看出,双引号内的始末都被用作了字符串。自然{{str二}}表明式会被解析成对应的剧情,再作为字符串。

AngularJS 4

 

根据变量的绑定=:

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>

        <div ng-controller="myAppCtrl">
            ctrl:<input type="text" ng-model="testname"><br>
            directive:<xingoo name="testname"></xingoo>
        </div>

        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule.controller("myAppCtrl",['$scope',function($scope){
                $scope.testname="my name is xingoo";
            }]);

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

  在上边的代码中,能够见见

  1 在调整器myAppCtrl对应的div中,定义了三个变量ng-model
—— testname。

  2 testname一唱一和的是输入框中输入的值。

  三然后把那几个变量当做三个参数字传送递给xingoo这一个标签的name属性。

  4在xingoo标签中,又把这么些name绑定到模板中的3个输入框内。

  末了五个输入框的内容被连接起来,无论改换哪3个输入框内的值,testname与name都会发生退换。

AngularJS 5

  通过上边那张图可以看出来:

  在命令中通过scope钦点say绑定规则是变量的绑定方式。

  最后通过xingoo标签内的习性注重关系把 testname与name连接在一块:

AngularJS 6

  

基于方法的绑定&:

  上边展现了依照字符串和变量的绑定方法,上面看看基于方法的绑定:

<!doctype html>
<html ng-app="myApp">
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
    </head>
    <body>

        <div ng-controller="myAppCtrl">
            <xingoo say="sayHello(name)"></xingoo>
            <xingoo say="sayNo(name)"></xingoo>
            <xingoo say="sayYes(name)"></xingoo>
        </div>

        <script type="text/javascript">
            var myAppModule = angular.module("myApp",[]);

            myAppModule.controller("myAppCtrl",['$scope',function($scope){
                $scope.sayHello = function(name){
                    console.log("hello !"+ name);
                };
                $scope.sayNo = function(name){
                    console.log("no !"+ name);
                };
                $scope.sayYes = function(name){
                    console.log("yes !"+ name);
                };
            }]);

            myAppModule.directive("xingoo",function(){
                return {
                    restrict:'AE',
                    scope:{
                        say:'&'
                    },
                    template:'<input type="text" ng-model="username"/><br>'+
                        '<button ng-click="say({name:username})">click</button><br>',
                    repalce:true
                }
            })
        </script>
    </body>
</html>

  这段代码中scope中的绑定规则成为了&,也便是艺术绑定。

  在body中,通过自定义标签传入了七个形式,分别是sayHello(name),sayNo(name),sayYes(name),那五个方法都必要叁个name变量。

  在命令的定义中,模板替换到1个输入框,一个开关:

  输入框:用于输入username,也等于多少个形式供给的参数name。

  开关:点击触发函数——通过绑定规则,绑定到相应的格局。

AngularJS 7  

  也正是说

  通过say在scope中的定义,angular知道了say对应的是个格局;

  通过{name:username}的涉及,知道了传播的是username。

  从而交给对应的形式试行。

  

  页面效果:

AngularJS 8

 

  参考

  [1] 大漠穷求,AngularJS实战:http://www.imooc.com/video/3085/0

相关文章