angular獨立作用域的使用概念-js教程-PHP中文網

首頁

web前端

js教程

angular獨立作用域的使用概念

php中世界最好的语言

Mar 12, 2018 pm 05:04 PM

angular作用域概念

這次帶給大家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中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

聊聊Angular中的元数据（Metadata）和装饰器（Decorator）Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习，带大家了解一下Angular中的元数据和装饰器，简单了解一下他们的用法，希望对大家有所帮助！

angular学习之详解状态管理器NgRxMay 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx，介绍一下NgRx的使用方法，希望对大家有所帮助！

浅析angular中怎么使用monaco-editorOct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor？下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用，希望对大家有所帮助！

项目过大怎么办？如何合理拆分Angular项目？Jul 26, 2022 pm 07:18 PM

Angular项目过大，怎么合理拆分它？下面本篇文章给大家介绍一下合理拆分Angular项目的方法，希望对大家有所帮助！

聊聊自定义angular-datetime-picker格式的方法Sep 08, 2022 pm 08:29 PM

怎么自定义angular-datetime-picker格式？下面本篇文章聊聊自定义格式的方法，希望对大家有所帮助！

Angular + NG-ZORRO快速开发一个后台系统Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战，了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统，希望对大家有所帮助！

聊聊Angular Route中怎么提前获取数据Jul 13, 2022 pm 08:00 PM

Angular Route中怎么提前获取数据？下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法，希望对大家有所帮助！

浅析Angular中的独立组件，看看怎么使用Jun 23, 2022 pm 03:49 PM

本篇文章带大家了解一下Angular中的独立组件，看看怎么在Angular中创建一个独立组件，怎么在独立组件中导入已有的模块，希望对大家有所帮助！

See all articles

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

禪工作室 13.0.1

強大的PHP整合開發環境

記事本++7.3.1

好用且免費的程式碼編輯器

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。