首頁 > web前端 > js教程 > angular獨立作用域的使用概念

angular獨立作用域的使用概念

php中世界最好的语言
發布: 2018-03-12 17:04:49
原創
1384 人瀏覽過

這次帶給大家angular獨立作用域的使用概念,angular獨立作用域的使用注意事項有哪些,下面就是實戰案例,一起來看一下。

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <ceshi></ceshi>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;ceshi&#39;,function(){            var option = {
                template:&#39;<p>{{abc}}</p>&#39;
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>
登入後複製

當我們自己創建某個指令時,這個指令肯定不可能只使用一次,是要重複多次使用的,有的在一個頁面內或者一個控制器內需要使用多次。
類似上面的這種場景,在任何一個輸入框內改變數據,都會導致其他的標籤內的數據一同發生改變,這顯然不是我們想要的,這個時候就需要獨立作用域了。

想轉換成獨立作用域只需要一行程式碼:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <ceshi></ceshi>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;ceshi&#39;,function(){            var option = {
                template:&#39;<p>{{abc}}</p>&#39;,
                scope:{}
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>
登入後複製

單向資料綁定

##@

運算子,雙引號內的內容當作字串進行綁定

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <my-directive name="aaaa"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {
                template:&#39;<p>wew{{name}}<p/>&#39;,
                scope:{
                    name:&#39;@&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
        });    </script></body></html>
登入後複製

單向綁定,從目前指令的屬性中取得到值,然後賦值給目前獨立作用域裡的這個屬性

angular獨立作用域的使用概念

雙向資料綁定

=運算子綁定的是變數

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <input type="text" ng-model="abc">
    <my-directive name="abc"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {
                template:&#39;<p>wew{{name}}<input ng-model="name"><p/>&#39;,
                scope:{
                    name:&#39;=&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.abc = &#39;ericzheng&#39;;
        });    </script></body></html>
登入後複製

name="abc"這個是核心,左邊聯結的是獨立作用域,右邊聯結的是外部的作用域裡的模型abc

angular獨立作用域的使用概念

#使用父作用域的行為

##&運算子綁定的內容是個方法

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title></head><body ng-app="myApp" ng-controller="mainController">
    <my-directive fn1="fn2(name)"></my-directive>
    <script src="angular.js"></script>
    <script>
        var myApp = angular.module(&#39;myApp&#39;,[]);
        myApp.directive(&#39;myDirective&#39;,function(){            var option = {                restrict:&#39;E&#39;,                template:&#39;<button ng-click="fn1({name:\&#39;username\&#39;})">wfewef</button>&#39;,                scope:{                    fn1:&#39;&&#39;
                }
            };            return option;
        });
        myApp.controller(&#39;mainController&#39;,function($scope){
            $scope.fn2 = function(attr){                console.log(attr);
            }
        });    </script></body></html>
登入後複製

angular獨立作用域的使用概念如何看懂:

先不管指令內部是怎麼實現的,先看怎麼用的,然後看一下對應的父作用域裡的變數或方法是怎麼定義的。


相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

angular的scopel指令使用詳解


Angular Material的使用詳解

#angularjs中$apply()的使用詳解

以上是angular獨立作用域的使用概念的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板