programing

Angularjs: 명령어에 스코프 변수를 전달하려면 어떻게 해야 합니까?

newsource 2023. 2. 11. 09:27

Angularjs: 명령어에 스코프 변수를 전달하려면 어떻게 해야 합니까?

디렉티브를 사용하여 여러 개의 태그를 만들고 추가하려고 합니다.<div>다음과 같이 합니다.

module.directive('createControl', function(){
  return function(scope, element, attrs){    
    console.log(attrs.createControl); // undefined     
  }                                          
});                                         


<div class="control-group" ng-repeat="(k, v) in selectedControls">
  <div create-control="{{ v.type }}"></div>
</div>

층에는 다음과 같은 구성이 있습니다.

$$element: b.fn.b.init[1]
$$observers: Object
$attr: Object
createControl: "date"
style: "margin-right: 15px"
__proto__: Object

근데 제가 이걸 쓰려고 하면attrs.createControl나는 이해한다undefined왜 그랬는지 이해가 안 가요실제 질문: 범위 변수를 디렉티브에 전달하려면 어떻게 해야 합니까?

    app.directive('createControl', function() {
      return {
        scope: {
          createControl:'='
        },
        link: function(scope, element, attrs){    
           element.text(scope.createControl);    
        }      
      }
    })  

  <div class="control-group" ng-repeat="v in [{type:'green'}, {type:'brown'}]">
    <div create-control="v.type"></div>
   </div>

지시 문서의 속성/보간 속성 섹션을 읽습니다.링크 단계에서는 속성이 설정되지 않았습니다.

를 사용하는 것을 포함한 몇 가지 방법이 있습니다.attrs.$observe또는$timeout.

app.directive('createControl', function($timeout){
 return function(scope, element, attrs){
      attrs.$observe('createControl',function(){
        console.log(' type:',attrs.createControl);
         element.text('Directive text, type is: '+attrs.createControl);
      });
  }
}) ;

DEMO

한다면v.type지시하는 범위의 유형에 따라 @charlietfl's 또는 @Joe의 answser를 사용할 수 있습니다({}}s).

한다면v.type변경되지 않습니다(즉, 링크 함수는 한 번만 값을 가져오면 되며 링크 함수가 실행될 때 이러한 값은 확실히 설정됩니다). 대신 $deval 또는 $eval 사용할 수 있습니다.이것은 $watch가 생성되지 않는다는 점에서 약간의 성능상 이점이 있습니다.(포함)$observe()그리고.=Angular는 $watch를 설정합니다.$watch는 다이제스트 사이클마다 평가됩니다).

<div create-control="v.type"></div>
app.directive('createControl', function ($parse) {
    return function (scope, element, attrs) {
        console.log('$eval type:', scope.$eval(attrs.createControl));
        var type = $parse(attrs.createControl)(scope);
        console.log('$parse type:', type);
        element.text('Directive text, type is: ' + type);
    }
});

demo

언급URL : https://stackoverflow.com/questions/16232917/angularjs-how-to-pass-scope-variables-to-a-directive