angularjs中directive聲明scope對象的用法

時間 2019-11-30

標籤 angularjs directive 聲明 scope 對象用法欄目 AngularJS 简体版

原文原文鏈接

總的來講用法分三種：javascript

》1： scope: false --> 繼承父域，實現雙向數據綁定html

示例代碼可自測：java

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>directive屬性 scope:{}</title>
</head>
<body ng-controller="mainCtrl">
    <p>scope：false  --> 繼承父域，實現 雙向數據綁定</p>
    姓名：<input type="text" name="" ng-model="myName">
    年齡：<input type="text" name="" ng-model="myAge">
    性別：<input type="text" name="" ng-model="mySex" >

    <div my-directive name="myName" this-is-age="myAge" sex="mySex" say-words="say(arg)"></div>
    
    <script type="text/javascript" src="../../../../lib/jquery/v1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/angular-v1.4.6.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);
        // mainCtrl
        myApp.controller('mainCtrl', mainController);
        // myDirective
        myApp.directive('myDirective', myDirective )

        // main controller
        function mainController($scope){
            $scope.myName = 'jcy';
            $scope.myAge = '22';
            $scope.mySex = 'male';
            $scope.info = '想知道個人我的信息嗎，不告訴你。。。';
            $scope.say = function(arg){
                alert(arg);
            }
        };

        // my directive
        function myDirective(){
             return {
                scope: false, // {} = isolate, true = child, false/undefined = no change
                restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
                template: '<div>'+
                          '<button>我要說話</button>'+
                          '<p>'+
                            '姓名：<input type="text" name="" ng-model="myName">'+
                            '年齡：<input type="text" name="" ng-model="myAge">'+
                            '性別：<input type="text" name="" ng-model="mySex" > <br>'+
                            '介紹1：<span ng-bind="info"></span><br>'+
                            '介紹2：<span>{{info}}</span>'+
                            '</p>'+
                          '</div>',
                link: function($scope, iElm, iAttrs, controller) {
                    $(iElm).on('click','button',function(e){
                        var words = '注意這個傳值方式哦' ;    
                        $scope.say( { arg:words } );                    
                    });
                }
            };
        }

    </script>
    
</body>
</html>

》2： scope: true --> jquery

初始化，繼承父域；app

子域屬性值沒有發生改變前，可實現單向數據綁定（父變 --> 子變）；函數

子域屬性值發生改變後，實現子域與發父域隔離（父變 --> 子不變）;測試

示例代碼可自測：this

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>directive屬性 scope:{}</title>
</head>
<body ng-controller="mainCtrl">
    <p>scope：true  --> 初始化，繼承父域；
                        子域屬性值沒有發生改變前，可實現 單向數據綁定（父變 --> 子變）；
                        子域屬性值發生改變後，實現子域與發父域隔離（父變 --> 子不變）</p>
    姓名：<input type="text" name="" ng-model="myName">
    年齡：<input type="text" name="" ng-model="myAge">
    性別：<input type="text" name="" ng-model="mySex" >

    <div my-directive name="myName" this-is-age="myAge" sex="mySex" say-words="say(arg)"></div>
    

    <script type="text/javascript" src="../../../../lib/jquery/v1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/angular-v1.4.6.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);
        // mainCtrl
        myApp.controller('mainCtrl', mainController);
        // myDirective
        myApp.directive('myDirective', myDirective )

        // main controller
        function mainController($scope){
            $scope.myName = 'jcy';
            $scope.myAge = '22';
            $scope.mySex = 'male';
            $scope.info = '想知道個人我的信息嗎，不告訴你。。。';
            $scope.say = function(arg){
                alert(arg.arg);
            }
        };

        // my directive
        function myDirective(){
             return {
                scope: true, // {} = isolate, true = child, false/undefined = no change
                restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
                template: '<div>'+
                          '<button>我要說話</button>'+
                          '<p>'+
                            '姓名：<input type="text" name="" ng-model="myName">'+
                            '年齡：<input type="text" name="" ng-model="myAge">'+
                            '性別：<input type="text" name="" ng-model="mySex" > <br>'+
                            '介紹1：<span ng-bind="info"></span><br>'+
                            '介紹2：<span>{{info}}</span>'+
                            '</p>'+
                          '</div>',
                link: function($scope, iElm, iAttrs, controller) {
                    $(iElm).on('click','button',function(e){
                        var words = '這是要測試 scope綁定函數，而且給函數傳值的方式' ;    
                        $scope.say( { arg:words } );                    
                    });
                }
            };
        }

    </script>
    
</body>
</html>

》3：spa

scope 的綁定方式：「@」、「=」、「&」 rest

綁定的名稱：要全爲小寫中間可用「-」符號鏈接, 綁定到到 scope中時，去掉「-」，並將「-」後第一個字符改成大寫,駝峯式命名

scope 綁定方式的區別：

「=」：指令中的屬性取值爲controller中對應$scope上屬性的取值，可用於雙向數據的綁定.

「@」：

1.指令中的取值爲html中的字面量/直接量. 即：attr="xxx"時，"@attr"形式獲得的是「xxx」字符串；

2.綁定 controller中的$scope property. 即：arrt="{{xxx}}",或者其它綁定$scope.property時，「@attr"形式獲得的是$scope.property。

可用於單向數據綁定。父（改變）-->子（改變），子（改變）-->父（不改變）。

「&」：指令中的取值爲Contoller中對應$scope上的屬性，可是這屬性必須爲一個函數回調。

當爲"func:&aa"時,傳值方式 $scope.func({ arg1:"xxx", arg2:"xxxx", .... }), html如 <div my-directive aa="xxfunction(arg1, arg2,......)"></div>

示例代碼可自測：

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>directive屬性 scope:{}</title>
</head>
<body ng-controller="mainCtrl">
    <p>
        總結：<br>
        scope 的綁定方式：「@」、「=」、「&」 <br>
        綁定的名稱：要全爲小寫 中間可用 「-」 符號鏈接, 綁定到到 scope中時，去掉「-」，並將「-」後第一個字符改成大寫,駝峯式命名 <br>
        scope 綁定方式的區別：<br>
          「=」：指令中的屬性取值爲controller中對應$scope上屬性的取值，可用於雙向數據的綁定. <br>
          「@」：
                1.指令中的取值爲html中的字面量/直接量. 即：attr="xxx"時，"@attr"形式獲得的是 「xxx」字符串；<br>
                2.綁定 controller中的$scope property. 即：arrt="{{xxx}}",或者其它綁定$scope.property時，「@attr"形式獲得的是$scope.property。
                可用於單向數據綁定。父（改變）-->子（改變），子（改變）-->父（不改變）。<br>
          「&」：指令中的取值爲Contoller中對應$scope上的屬性，可是這屬性必須爲一個函數回調。
               當爲"func:&aa"時,傳值方式 $scope.func({ arg1:"xxx", arg2:"xxxx", .... }), html如 <pre>&lt;div my-directive aa="xxfunction(arg1, arg2,......)"&gt;&lt;/div&gt;</pre> <br>
    </p>

    姓名：<input type="text" name="" ng-model="myName">
    年齡：<input type="text" name="" ng-model="myAge">
    性別：<input type="text" name="" ng-model="mySex" >

    <div my-directive name="myName" this-is-age="myAge" sex="{{mySex}}" say-words="say(arg)"></div>

    <script type="text/javascript" src="../../../../lib/jquery/v1.10.2/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/angular-v1.4.6.min.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', []);
        // mainCtrl
        myApp.controller('mainCtrl', mainController);
        // myDirective
        myApp.directive('myDirective', myDirective )

        // main controller
        function mainController($scope){
            $scope.myName = 'jcy';
            $scope.myAge = '22';
            $scope.mySex = 'male';
            $scope.say = function(arg){
                alert(arg);
            }
        };

        // my directive
        function myDirective(){
             return {
                scope: {
                    name: "=",
                    age: "=thisIsAge",
                    sex: "@",
                    say: "&sayWords"
                }, // {} = isolate, true = child, false/undefined = no change
                restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
                template: '<div>'+
                          '<button>我要說話</button>'+
                          '<p>'+
                            '姓名：<input type="text" name="" ng-model="name">'+
                            '年齡：<input type="text" name="" ng-model="age">'+
                            '性別：<input type="text" name="" ng-model="sex" >'+
                            '</p>'+
                          '</div>',
                link: function($scope, iElm, iAttrs, controller) {
                    $(iElm).on('click','button',function(e){
                        var words = '這是要測試 scope綁定函數，而且給函數傳值的方式' ;    
                        $scope.say( { arg:words } );                    
                    });
                }
            };
        }

    </script>
    
</body>
</html>