집 >웹 프론트엔드 >JS 튜토리얼 >Angular에서 독립적인 범위를 사용하는 개념

Angular에서 독립적인 범위를 사용하는 개념

php中世界最好的语言원래의: 2018-03-12 17:04:491388검색

이번에는 각도 독립 스코프 사용에 대한 개념을 가져오겠습니다. 각도 독립 스코프 사용 시 주의사항은 무엇인가요?

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

단방향

data 바인딩

: @

operator

, 큰따옴표 안의 내용은 바인딩을 위한 문자열으로 처리됩니다.

<!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 중국어 웹사이트의 다른 관련 기사를 주목하세요!