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);
});
}
}) ;
한다면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);
}
});
언급URL : https://stackoverflow.com/questions/16232917/angularjs-how-to-pass-scope-variables-to-a-directive
'programing' 카테고리의 다른 글
Oracle 테이블에서 중복된 값을 찾으려면 어떻게 해야 합니까? (0) | 2023.02.11 |
---|---|
데이터가 도착하기 전에 ng-src가 이미지를 로드하지 않도록 하려면 어떻게 해야 합니까? (0) | 2023.02.11 |
사용자 지정 css 클래스를 WooCommerce 체크아웃 필드에 추가합니다. (0) | 2023.02.11 |
wp_press를 사용한 워드프레스 페이지 리다이렉트 (0) | 2023.02.11 |
get_header()가 테마의 서브폴더에 있는 커스텀헤더 파일을 호출하려면 어떻게 해야 합니까? (0) | 2023.02.11 |