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

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

php中世界最好的语言
풀어 주다: 2018-03-12 17:04:49
원래의
1384명이 탐색했습니다.

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

명령을 직접 만들면 한 번만 사용할 수 없습니다. 일부는 페이지나

컨트롤러

내에서 여러 번 사용해야 합니다. 위 시나리오와 마찬가지로 입력 상자의 데이터를 변경하면 다른 태그의 데이터도 동시에 변경됩니다. 이는 분명히 현재로서는 독립적인 범위가 필요하지 않습니다.
독립적인 범위로 변환하려면 코드 한 줄만 필요합니다:

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

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

단일 방향 바인딩, 현재 명령어의 속성에서 값을 가져온 다음 이를 현재 독립 범위의 속성에 할당합니다

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으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿