반응형
Angular 지시문 요소에 속성을 추가하는 방법은 무엇입니까?
이 스 니펫을 작동하는 방법이 무엇인지 궁금합니다.
//html
<div ng-app="app">
<div ng-controller="AppCtrl">
<a my-dir ng-repeat="user in users">{{user.name}}</a>
</div>
</div>
//js
var app = angular.module('app', []);
app.controller("AppCtrl", function ($scope) {
$scope.users = [{name:'John',id:1},{name:'anonymous'}];
$scope.fxn = function() {
alert('It works');
};
})
app.directive("myDir", function ($compile) {
return {
link:function(scope,el){
el.attr('ng-click','fxn()');
//$compile(el)(scope); with this the script go mad
}
};
});
나는 그것이 컴파일 단계에 관한 것이라는 것을 알고 있지만 요점을 이해하지 못하기 때문에 간단한 설명이 매우 감사 할 것입니다.
동일한 요소에 다른 지시문을 추가하는 지시문 :
비슷한 답변 :
여기 플런 커가 있습니다 : http://plnkr.co/edit/ziU8d826WF6SwQllHHQq?p=preview
app.directive("myDir", function($compile) {
return {
priority:1001, // compiles first
terminal:true, // prevent lower priority directives to compile after it
compile: function(el) {
el.removeAttr('my-dir'); // necessary to avoid infinite compile loop
el.attr('ng-click', 'fxn()');
var fn = $compile(el);
return function(scope){
fn(scope);
};
}
};
});
훨씬 더 깨끗한 솔루션-전혀 사용하지 마십시오 ngClick
.
플 런커 : http://plnkr.co/edit/jY10enUVm31BwvLkDIAO?p=preview
app.directive("myDir", function($parse) {
return {
compile: function(tElm,tAttrs){
var exp = $parse('fxn()');
return function (scope,elm){
elm.bind('click',function(){
exp(scope);
});
};
}
};
});
이것을 시도 할 수 있습니다.
<div ng-app="app">
<div ng-controller="AppCtrl">
<a my-dir ng-repeat="user in users" ng-click="fxn()">{{user.name}}</a>
</div>
</div>
<script>
var app = angular.module('app', []);
function AppCtrl($scope) {
$scope.users = [{ name: 'John', id: 1 }, { name: 'anonymous' }];
$scope.fxn = function () {
alert('It works');
};
}
app.directive("myDir", function ($compile) {
return {
scope: {ngClick: '='}
};
});
</script>
반응형
'IT이야기' 카테고리의 다른 글
Visual Studio가 빌드 중에 계속 중단되었을때 (0) | 2021.04.29 |
---|---|
Windows 8.1에서 빌드되지 않는 노드 패키지-Microsoft.Cpp.Default.props 누락 (0) | 2021.04.29 |
스코프가 파괴 될 때 각도 $ watch를 제거 (0) | 2021.04.28 |
==를 기본 및 boxed 값에 사용할 때, autoboxing 완료 또는 unboxing 완료 (0) | 2021.04.28 |
Bitbucket 저장소가 "원격 : 잘못된 암호 시도 횟수가 너무 많습니다. (0) | 2021.04.28 |