AngularJS—— 獨立做用域

時間 2019-12-05

原文原文鏈接

獨立做用域的做用

　　爲了便於理解，先看一下下面這個例子：javascript

<!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中，建立了一個指令，該指令實現了一個自定義的標籤。html

　　標籤<xingoo></xingoo>的做用是替換成一個輸入框和一個數據顯示。java

　　這樣就會出現下面的效果：app

　　分析：函數

　　當咱們本身建立某個指令時，這個指令確定不可能只使用一次，是要重複屢次使用的，有的在一個頁面內或者一個控制器內須要使用屢次。ui

　　相似上面的這種場景，在任何一個輸入框內改變數據，都會致使其餘的標籤內的數據一同發生改變，這顯然不是咱們想要的。spa

　　這個時候就須要獨立做用域了。rest

如何實現獨立做用域

　　下面看看獨立做用域的效果：htm

<!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：{}這個屬性，就可使標籤擁有本身的做用域。ip

　　僅僅是添加這一行代碼而已，就實現了獨立做用域。

　　在進行輸入時，每一個模板內使用本身的數據，不會相互干擾。

做用域數據綁定　　

　　自定義標籤或者進行擴展時，會有這樣的需求場景，要在標籤中添加一些屬性，實現一些複雜功能。

　　關於這些屬性，獨立做用域是如何的作的呢？看看下面的內容吧。

　　舉個例子：

<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所表示的內容。

　　能夠看到，雙引號內的內容都被當作了字符串。固然{{str2}}表達式會被解析成對應的內容，再當作字符串。

基於變量的綁定=:

<!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都會發生改變。

　　經過下面這張圖能夠看出來：

　　在指令中經過scope指定say綁定規則是變量的綁定方式。

　　最終經過xingoo標籤內的屬性依賴關係把 testname與name鏈接在一塊兒：

基於方法的綁定&:

　　上面展現了基於字符串和變量的綁定方法，下面看看基於方法的綁定：

<!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。

　　按鈕：點擊觸發函數——經過綁定規則，綁定到相應的方法。

　　也就是說

　　經過say在scope中的定義，angular知道了say對應的是個方法；

　　經過{name:username}的關聯，知道了傳入的是username。

　　從而交給對應的方法執行。

　　頁面效果：