AngularJS - scope의 귀속 정책

scope라는 대상은 Angular에서 매우 중요합니다. AngularJS를 잘 배우고 Scope를 능숙하게 사용할 때 기본기를 익히려면 Scope의 몇 가지 귀속 전략을 소개하겠습니다.
1. @: 현재 속성을 문자열로 전달합니다.외부에서 온 scope의 값을 연결할 수 있습니다. 속성 값에 {{{}}}을 삽입하면 됩니다.다음은 코드입니다.

<!DOCTYPE html>
<html  ng-app="MyModule">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="bootstrap-3.0.0/css/bootstrap.css">
</head>
<body>
       <div ng-controller="myCtrl">
           <drink zk="{{ctrlFlavor}}"></drink>
       </div>
</body>
<script src="angular-1.3.0.14/angular.js"></script>
<script src="scope.js"></script>
</html>

Controller 코드

var myModule=angular.module("MyModule",[]);

myModule.controller('myCtrl',['$scope',function($scope){
    $scope.ctrlFlavor="88888";
}])
myModule.directive("drink",function(){
   return{
        restrict:'AE',
        scope:{
           zk:'@'
        },
        template:"<div>{{zk}}</div>"
   }
})

명령drink에는 zk 속성이 있는데 그 상단의div의scope에는 ctrlFlavor 속성이 있다. 위의 예는 상단div에서scope의 값이 하단 명령drink의zk 속성에 귀속된다는 것이다.
2. "=": 부모scope의 속성과 양방향 귀속
HTML의 코드를 나는 간략하게 썼는데, 위의 것과 차이가 많지 않다

<div ng-controller="myCtrl">
           Ctrl:
           <br>
           <input type="text" ng-model="ctrlFlavor">
           <br>
           Directive:
           <br>
           <drink zk="ctrlFlavor"></drink>
       </div>

Controller의 코드

var myModule=angular.module("MyModule",[]);
myModule.controller('myCtrl',['$scope',function($scope){ $scope.ctrlFlavor="88888";}])myModule.directive("drink",function(){ return{ restrict:'AE', scope:{ zk:'=' }, template:'<input type="text" ng-model="zk">' }})

HTML에는 텍스트 상자가 있고 drink 명령의 템플릿에는 텍스트 상자가 있습니다. 이 두 텍스트 상자의 내용은 양방향으로 귀속됩니다.즉, 위 텍스트 상자의 내용이 바뀌면 아래 텍스트 상자의 내용도 바뀐다.
3. "&": 부모scope에서 온 함수를 전달하고 잠시 후 호출합니다

<span style="font-family:SimSun;font-size:18px;">  <div ng-controller="MyCtrl">
       <greeting greet="sayHello(name)"></greeting>
   </div></span>

Controller 코드

var myModule=angular.module("MyModule",[]);
myModule.controller('MyCtrl', ['$scope', function($scope){
    $scope.sayHello=function(name){
        alert("Hello "+name);
    }
}])
myModule.directive("greeting", function() {
    return {
        restrict:'AE',
        scope:{
            greet:'&'
        },
        template:'<input type="text" ng-model="userName" /><br/>'
        + '<button class="btn btn-default" ng-click="greet({name:userName})">'
        + 'Greeting</button><br/>'
    }
});

이 예는 div에서 Controller를 연결하는 것이다. 이 Controller에서sayHello 방법을 정의했고 div에서greeting이라는 명령을 정의했다. 이 명령의greet 방법은부모scope의sayHello와 서로 관련된다. 그리고 우리는 Controller에서greeting 명령의scope에greet를 정의하여 부모scope의 함수를 서브scope에 전달한다.
위쪽은 scope의 귀속 전략 중의 간단한 실례입니다. AngularJS를 배우려면 기초부터 잡아야 합니다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

AngularJS - scope의 귀속 정책

좋은 웹페이지 즐겨찾기