AngularJs 명령어의 범위 속성에 대한 자세한 설명에 대한 간략한 토론

AngularJS는 directive() 메서드 클래스를 사용하여 지시어를 정의합니다.

.directive("name",function(){
  return{
     
  };
})

위는 지시어를 정의하는 주요 프레임워크입니다.

1. 첫 번째 매개변수: name은 정의된 명령어의 이름을 나타냅니다(angularjs는 이 명령어를 등록하기 위해 이 이름을 사용합니다).

2. 두 번째 매개변수: function 고구마는 객체나 함수를 반환해야 하지만 일반적으로 객체를 반환합니다. return 뒤에 오는 것은 반환된 객체입니다.

반환된 객체에는 명령어의 범위를 수정하는 데 사용되는 범위 속성이 있습니다.

지시문을 등록할 때마다 이 지시문은 자체 범위를 사용해야 할까요, 아니면 상위 범위에서 상속되는 하위 범위를 만들어야 할까요?라는 질문을 고려합니다. 격리된 범위(외부 범위에 의존하지 않음);

범위 속성의 값은 각각 위의 범위, 하위 범위, 격리 역할 도메인에 해당하는 false, true입니다.

이러한 속성의 사용법을 완전히 이해하기 위해 세 가지 예를 들어보겠습니다.

1. 범위: false

html 코드

<div ng-controller="myController">
  <div>
    <span>我的名字是</span><span ng-bind="name"></span><br/>
    <span>我的年龄是</span><span ng-bind="age"></span>
    <div my-directive></div>
  </div>
</div>
<script>
  angular.module("app",[])
    .controller("myController",function($scope){
      $scope.name = "kobe";
      $scope.age = 39;
    })
    .directive("myDirective",function(){
      return{
        scope:false,
        restrict:"A",
        template:"<div><h1>下面的部分是我们创建指令时生成的</h1>"+
            "我的名字是:<span ng-bind=&#39;name&#39;></span><br/>"+
            "我的年龄是:<span ng-bind=&#39;age&#39;></span><br/>"+
            "输入你的新名字:<input type=&#39;text&#39; ng-model=&#39;name&#39;>"+
            "</div>"
      };
    })
</script>

효과:

여기서 time , 명령의 범위는 myController의 범위와 동일하므로 입력 상자에 새 이름을 입력하면 다음 그림과 같이 위쪽과 아래쪽의 이름이 그에 따라 변경됩니다.

2. 범위: true

이때 입력란에 새 이름을 입력하면 그림과 같이 첫 번째 실험과 다른 효과가 나타납니다. 그림:

여기 상단의 이름은 변경되지 않았지만 하단의 이름은 변경되었습니다.

이 실험에서 주목해야 할 두 가지 사항은 다음과 같습니다.

1. 페이지에 들어가거나 새로 고친 후에는 상위 및 하위 이름이 동일합니다. 그 이유는 다음과 같습니다. true인 경우 도메인 하위 기능은 상위 역할의 속성과 메서드를 상속합니다. 따라서 자식 스코프에는 이름과 나이가 정의되어 있지 않더라도

는 부모 스코프의 myController에서 상속받을 수 있습니다. 따라서 위와 아래에는 동일한 이름과 나이가 표시됩니다.

2. 새로운 이름을 입력하면 위쪽은 그대로이고 아래쪽이 변경됩니다. 이유는 하위 범위에서 이름과 나이를 수정하므로 아래쪽 이름이 변경되고 위쪽이 변경되기 때문입니다. 이름은 상위 범위에 속합니다. 상위 범위는 하위 범위

에 액세스할 수 없으므로 위 이름의 값은 변경되지 않습니다.

3. 범위: { }

명령의 범위 부분은 다음과 같이 수정됩니다.

scope:{
  name:"@",
  age:"@"
},

<div my-directive name="aaa" age="33"></div>