【AngularJS】—— 12 独立作用域

style=”font-size: 13px; color: #000080;”>前面通过视频上了解了命令的定义,这里上学一下限令中之作用域的连锁内容。

style=”font-size: 13px; color: #000080;”>通过独立作用域的不等绑定,可以实现再次具有适应性的自定义标签。借由不同之绑定规则绑定属性,从而定义有适合重新多应用场景的价签。

style=”font-size: 13px; color: #000080;”>本篇将见面总结下的内容:

  1
为何用单独作用域

  2
怎样实现独立作用域

  3
作用域的数据绑定

style=”font-size: 13px;”>之前起有不当,是出于replace拼写错误导致的。

style=”font-size: 13px;”>拼写正确后,网友发现报错,无法正常工作。这是坐模板被在单标签<br>,导致模板无法正确分析~

style=”font-size: 13px;”>再次感谢博友们提出的左!

独作用域的用意

  为了有利于理解,先押一下下这例子:

<!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中,创建了一个指令,该令实现了一个自定义的标签。

  标签<xingoo></xingoo>的意向是
替换成 一个输入框和一个数据展示。

  这样便会见面世下面的效应:

图片 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:{}这个特性,就足以使标签有自己之作用域。

  仅仅是互补加这一行代码而已,就落实了单身作用域。

  于进展输入时,每个模板内采用好的数目,不会见彼此干扰。

图片 2

 

作用域数据绑定  

  自定义标签或者进行扩张时,会生出如此的要求状况,要在标签中上加有性,实现部分扑朔迷离功能。

  关于这些性,独立作用域是怎样的召开的也?看看下面的情吧。

  举个例:

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

  假设传入的是方这种,我们怎么区分它传播的究竟是变量呢?还是字符串呢?还是艺术吗?

  因此AngularJS有矣三种起定义的作用域绑定方式:

  1 冲字符串的绑定:使用@操作符,双引号内之情节作字符串进行绑定。

  2 冲变量的绑定:使用=操作符,绑定的内容是单变量。

  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所绑定的物是一个字符串。

  在模板被,使用表达式{{say}}输出say所代表的始末。

图片 3

  可以看看,双引号内之情节都叫视作了字符串。自然{{str2}}表达式会吃解析成对应的内容,再作字符串。

图片 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相应之是输入框中输入的值。

  3
然后把这个变量当做一个参数传递给xingoo这个标签的name属性。

  4
当xingoo标签中,又拿这name绑定到模板被之一个输入框内。

  最终两独输入框的情让连接起来,无论改啊一个输入框内的价值,testname与name都见面生出转移。

图片 5

  通过下就张图可以看下:

  于命令中经scope指定say绑定规则是变量的绑定方式。

  最终经过xingoo标签内的特性依赖关系将 testname与name连接于联合:

图片 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变量。

  于指令的概念着,模板替换成一个输入框,一个按钮:

  输入框:用于输入username,也尽管是三独办法需要的参数name。

  按钮:点击触发函数——通过绑定规则,绑定到对应的法子。

图片 7  

  也就是说

  通过say在scope中的定义,angular知道了say对应之是只方法;

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

  从而交给对应的道执行。

  

  页面效果:

图片 8

 

  参考

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

相关文章