Angularjs-지시문에 인수 전달

Angularjs-지시문에 인수 전달

---

지시문에 인수를 전달하는 방법이 있는지 궁금하십니까?

내가하고 싶은 것은 다음과 같이 컨트롤러에서 지시문을 추가하는 것입니다.

$scope.title = "title";
$scope.title2 = "title2";

angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>');

내 디렉티브 템플릿의 내용이 한 범위 또는 다른 범위에 링크 될 수 있도록 동시에 인수를 전달할 수 있습니까?

다음은 지시문입니다.

app.directive("directive_name", function(){
    return {
        restrict:'E',
        transclude:true,
        template:'<div class="title"><h2>{{title}}</h3></div>',
        replace:true
    };
})

동일한 지시문을 $ scope.title2와 함께 사용하려면 어떻게해야합니까?

---

지시문 요소에 속성을 지정하여 내장 Angular 지시문과 마찬가지로 사용자 정의 지시문에 인수를 전달할 수 있습니다.

angular.element(document.getElementById('wrapper'))
       .append('<directive-name title="title2"></directive-name>');

해야 할 일은 scope지시문의 팩토리 기능에서 (인수 / 파라미터 포함 )을 정의하는 것 입니다. 아래 예에서 지시문은-매개 변수를 사용합니다 title. 그런 다음 template일반 Angular-way를 사용하여 예를 들어에서 사용할 수 있습니다 .{{title}}

app.directive('directiveName', function(){
   return {
      restrict:'E',
      scope: {
         title: '@'
      },
      template:'<div class="title"><h2>{{title}}</h2></div>'
   };
});

바인딩 방법 / 내용에 따라 다른 옵션이 있습니다.

• = 양방향 바인딩
• @ 단순히 값을 읽습니다 (단방향 바인딩).
• & 함수를 바인딩하는 데 사용됩니다.

어떤 경우에는 "내부"이름과 다른 "외부"이름을 사용할 수 있습니다. 외부는 지시문 요소의 속성 이름을 의미하고 내부는 지시문 범위 내에서 사용되는 변수의 이름을 의미합니다.

예를 들어 위의 지시문을 살펴보면 내부적으로 title-property 로 작업하려는 경우에도 제목에 다른 추가 속성을 지정하지 않을 수 있습니다 . 대신 다음과 같이 지시문을 사용하려고합니다.

<directive-name="title2"></directive-name>

범위 정의에서 위에서 언급 한 옵션 뒤에 이름을 지정하면됩니다.

scope: {
    title: '@directiveName'
}

또한 다음 사항에 유의하십시오.

• HTML5 사양은 사용자 정의 속성 (기본적으로 Angular 응용 프로그램의 모든 위치에 있음) 앞에 data-. Angular는 data-속성 에서 -prefix를 제거하여이를 지원 합니다. 따라서 위의 예에서 요소 ( data-title="title2") 에 속성을 지정할 수 있으며 내부적으로 모든 것이 동일합니다.
• 요소의 속성은 항상 형식이며 <div data-my-attribute="..." />코드 (예 : 범위 개체의 속성)에서는 형식이 myAttribute. 나는 이것을 깨닫기 전에 많은 시간을 잃었습니다.
• 서로 다른 Angular 구성 요소 (컨트롤러, 지시문)간에 데이터를 교환 / 공유하는 또 다른 접근 방식의 경우 서비스 또는 지시문 컨트롤러를 살펴볼 수 있습니다.
• Angular 홈페이지 (지침) 에서 더 많은 정보를 찾을 수 있습니다.

---

내 문제를 해결 한 방법은 다음과 같습니다.

지령

app.directive("directive_name", function(){
    return {
        restrict: 'E',
        transclude: true,
        template: function(elem, attr){
           return '<div><h2>{{'+attr.scope+'}}</h2></div>';
        },
        replace: true
    };
})

제어 장치

$scope.building = function(data){
    var chart = angular.element(document.createElement('directive_name'));
    chart.attr('scope', data);
    $compile(chart)($scope);
    angular.element(document.getElementById('wrapper')).append(chart);
  }

이제 동일한 지시문을 통해 다른 범위를 사용하고 동적으로 추가 할 수 있습니다.

---

아래와 같이 시도 할 수 있습니다.

app.directive("directive_name", function(){
return {
    restrict:'E',
    transclude:true,
    template:'<div class="title"><h2>{{title}}</h3></div>',
    scope:{
      accept:"="
    },
    replace:true
  };
})

'accept'속성 값과 상위 범위 사이에 양방향 바인딩을 설정합니다.

또한 속성을 사용하여 양방향 데이터 바인딩을 설정할 수도 있습니다. '='

예를 들어 키와 값을 모두 로컬 범위에 바인딩하려면 다음을 수행합니다.

  scope:{
    key:'=',
    value:'='
  },

자세한 정보는 https://docs.angularjs.org/guide/directive

따라서 컨트롤러에서 지시문으로 인수를 전달하려면 아래 fiddle을 참조하십시오.

http://jsfiddle.net/jaimem/y85Ft/7/

도움이 되었기를 바랍니다 ..

---

<button my-directive="push">Push to Go</button>

app.directive("myDirective", function() {
    return {
        restrict : "A",
         link: function(scope, elm, attrs) {
                elm.bind('click', function(event) {

                    alert("You pressed button: " + event.target.getAttribute('my-directive'));
                });
        }
    };
});

여기 내가 한 일이 있습니다

html 속성으로 지시문을 사용하고 있으며 HTML 파일에서 다음과 같이 매개 변수를 전달했습니다. my-directive="push"그리고 지시문에서 Mouse-click 이벤트 개체에서 검색했습니다. event.target.getAttribute('my-directive').

참고URL : https://stackoverflow.com/questions/26409460/angularjs-pass-argument-to-directive