IT이야기

Angular 지시문 요소에 속성을 추가하는 방법

cyworld 2021. 4. 29. 21:24
반응형

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>

참조 URL : https://stackoverflow.com/questions/21687925/angular-directive-how-to-add-an-attribute-to-the-element

반응형