美文网首页AngularJS开发WebApp
angularjs指令中实现与外层组件进行数据交互的几种方式

angularjs指令中实现与外层组件进行数据交互的几种方式

作者: MakingChoice | 来源:发表于2016-05-03 21:58 被阅读2154次

    指令中实现与外层组件进行数据交互大概有这几种方式:

    * 和父级作用域共用一个scope(双向绑定/双向传递)
    * 继承父级作用域的scope(单向绑定/单向传递)
    * 通过事件监听来进行传递数据(/单向传递)
    * 通过指令中link函数中attr进行获取父级数据(单向传递)
    * 通过指令中scope:{ }中@进行获取父级数据(单向传递)
    * 通过指令中scope:{ }中“=”进行传递数据(双向绑定)
    * 通过$scope.$watch()进行数据监听进行数据传递(单向绑定)
    * 通过$scope.$observe()进行数据监听进行数据传递(单向绑定)
    * 指令通过require:'ngModel'进行数据传递(双向绑定)
    通过下面例子来解释一下<p>

    通过指令中<code>scope:{ }</code>中“=”进行传递数据(双向绑定)

    先放代码,然后解释

    <body ng-controller="myCon">
        <div ng-repeat="option in data">
            <h3>{{option.tittle}}</h3>
            <h2>{{option.content}}</h2>
            <em-text data="option.content"></em-text>
        </div>
    </body>
    
    var app=angular.module("interpolateApp",["template"])
                .controller("myCon",["$scope", function ($scope) {
                    $scope.data=[{
                        tittle:"one",
                        content:"123"
                    },{
                        tittle:"two",
                        content:"444"
                    },{
                        tittle:"three",
                        content:"555"
                    }]
                }])
                .directive("emText", function () {
                    return{
                        restrict:'E',
                        templateUrl:'test.html',
                        replace:true,
                        scope:{
                            data:'='
                        },
                        link: function (scope, element, attrs) {
                            //var num=parseInt(attrs.data);
                            var num=scope.data;
                            /*console.log(num);*/
                            if(num>500){
                                scope.isActive=true
                            }else{
                                scope.isActive=false;
                            }
                        }
                    }
                })
    var template=angular.module("template",[])
        .run(["$templateCache", function ($templateCache) {
            $templateCache.put("test.html","<div>" +
                "<span ng-class=\"{true:'active', false:'unActive'}[isActive]\"><input type='text' ng-model='data'/>             </span>" +
        "</div>")
    }])
    

    这是通过在scope中设置使用场景‘=’来进行数据交互的。其中‘=’的含义是通过与父scope中的属性进行双向绑定。在上例子中即为data属性的值,与指令模板中的ng-model的值进行双向交互。<p>
    上面的例子稍加变形就能实现:通过指令中link函数中attr进行获取父级数据(单向传递)

    通过指令中link函数中attr进行获取父级数据(单向传递)

    代码如下:

    <body ng-controller="myCon">
        <div ng-repeat="option in data">
            <h3>{{option.tittle}}</h3>
            <h3>{{option.content}}</h3>
            <em-text data="{{option.content}}"></em-text>
        </div>
    </body>
    
    <script>
        var app=angular.module("interpolateApp",["template"])
                .controller("myCon",["$scope", function ($scope) {
                    $scope.data=[{
                        tittle:"one",
                        content:123
                    },{
                        tittle:"two",
                        content:544
                    },{
                        tittle:"three",
                        content:455
                    }]
                }])
                .directive("emText", function () {
                    return{
                        restrict:'EA',
                        templateUrl:'test.html',
                        replace:true,
                        link: function (scope, element, attrs) {
                            var num=attrs.data;
                            console.log(num);
                            if(num>500){
                                scope.isActive=true
                            }else{
                                scope.isActive=false;
                            }
                            scope.data=num;
                        }
                    }
                })
        var template=angular.module("template",[])
                .run(["$templateCache", function ($templateCache) {
                    $templateCache.put("test.html","<div>" + "<span ng-class=\"{true:'active', false:'unActive'}[isActive]\">{{data}}</span>" + "</div>")
            }])
    </script>
    

    案例1和案例2主要有以下几点不同:

    <ul>
    <li>在html中案例1采用的是data=“option.content”的写法,而案例2采用的是data=“{{option.content}}”这样的写法,因为这是因为案例1是采用scope中‘=’的使用场景,其底层实现原理是<code>$scope.$watch()</code>,<code>$scope.$watch()</code>是实现双向绑定的基础函数,用来监听值的变化,所以不需要写<code>{{}}</code>,但是案例2中是采用通过link函数的attrs来获取属性的值,需要<code>data=“{{option.content}}”</code>首先获取model的中值,然后在传递到<code>link</code>函数中,所以需要写<code>$scope.$watch()</code><li>
    <li>通过属性集合<code>attrs</code>来获取其中一个的值。</li>
    </ul>

    通过指令中scope:{ }中@进行获取父级数据(单向传递)

    <!DOCTYPE html>
    <html lang="en" ng-app="connectApp">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/angular.min.js" type="text/javascript"></script>
        <script src="lib/angular-animate.js" type="text/javascript"></script>
        <style>
            .active{
                color:red
            }
            .unActive{
                color:blue
            }
        </style>
    </head>
    <body ng-controller="myCon">
        <div ng-repeat="option in data">
            <h3>{{option.tittle}}</h3>
            <h1>{{option.content}}</h1>
            <em-text data="{{option.content}}"></em-text>
        </div>
    </body>
    <script>
        var app=angular.module("connectApp",["template"])
                .controller("myCon",["$scope", function ($scope) {
                    $scope.test=1;
                    $scope.data=[{
                        tittle:"one",
                        content:123
                    },{
                        tittle:"two",
                        content:544
                    },{
                        tittle:"three",
                        content:455
                    }]
                }])
                .directive("emText", function () {
                    return{
                        restrict:'EA',
                        replace:true,
                        templateUrl:"one.html",
                        scope:{
                            data:"@"
                        },
                        link: function (scope, element, attr) {
    
                            if(attr.data>300){
                                scope.isActive=true
                            }else{
                                scope.isActive=false;
                            }
                        }
                    }
                })
        var template=angular.module("template",[])
            .run(["$templateCache", function ($templateCache) {
                $templateCache.put('one.html',"" +
                "<div ng-model=\"data\"  ng-class=\"{true:'active', false:'unActive'}[isActive]\">{{data}}</div>")
            }])
    </script>
    </html>
    

    在这个案例中使用的是<code>scope{data:"@"}</code>来实现指令与外界进行通信的,此时使用<code>@</code>传递的是字符串而不是对象。即使用当前指令中的template子级scope作用域相同的名称的值,等于父级作用域中和属性名称相同的值。

    继承父级作用域的scope(单向绑定/单向传递)

    下面是例子

    <!DOCTYPE html>
    <html lang="en" ng-app="connectApp">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="lib/angular.min.js" type="text/javascript"></script>
        <style>
            .active{
                color:red
            }
            .unActive{
                color:blue
            }
        </style>
    </head>
    <body ng-controller="myCon">
    <div ng-repeat="option in data">
        <h3>{{option.tittle}}</h3>
        <h1>{{option.content}}</h1>
        <em-text data="{{option.content}}"></em-text>
    </div>
    </body>
    <script>
        var app=angular.module("connectApp",["template"])
                .controller("myCon",["$scope", function ($scope) {
                    $scope.data=[
                        {
                            tittle:"one",
                            content:123
                        },
                        {
                            tittle:"two",
                            content:111
                        },
                        {
                            tittle:"three",
                            content:444
                        }
                    ]
                }])
                .directive('emText', function () {
                    return{
                        restrict:'EA',
                        scope:true,
                        templateUrl:"one.html",
                        link: function (scope, element, attr) {
    
                        }
                    }
                })
        var template=angular.module("template",[])
                .run(["$templateCache", function ($templateCache) {
                    $templateCache.put("one.html","" +
                        "<div da=\"data\" ng-class=\"{true:'active',false:'unActive'}[isActive]\">{{data}}</div>")
                }])
    
    </script>
    </html>
    

    如果要创建一个能够从外部原型继承作用域的指令,将scope值设置为true,简单来说就是实现可隔离的继承,即子作用域不能影响父作用域。

    暂时先写这么多,稍后来补

    相关文章

      网友评论

      本文标题:angularjs指令中实现与外层组件进行数据交互的几种方式

      本文链接:https://www.haomeiwen.com/subject/qmkrrttx.html