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-directives와 마찬가지로 directive-element의 Atribut을 지정함으로써 커스텀디렉티브에 인수를 전달할 수 있습니다.

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

할 은 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아,scope(인수(들)/파라미터(들)를 포함)를 지시의 공장 출하시 기능에 포함시킵니다. "Direction"을 합니다.title- parameter - 변수. - 매개 변수. 다음 예를 '아까보다'에서할 수 있습니다.template Angular-way: , Angular-way: , , Angular-way: 를 합니다).{{title}}

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

바인드 방법 및 내용에 따라 다양한 옵션이 있습니다.

• =입니다.
• @ 바인딩)을 .
• &는 함수 됩니다.

경우에 따라서는 "내부" 이름과 다른 "외부" 이름을 사용할 수 있습니다.external은 directive-element의 속성명을 의미하고 internal은 directive의 범위내에서 사용되는 변수의 이름을 의미합니다.

, 지시문을 , 으로는 「」, 「」, 「」, 「」, 「」, 「Attribute」를 의 어트리뷰트를 지정할 .title.- - 합니다.대신 다음과 같이 디렉티브를 사용합니다.

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

이것은, 스코프 정의에서 상기의 옵션 뒤에 이름을 지정하는 것으로 실현할 수 있습니다.

scope: {
    title: '@directiveName'
}

또, 이하의 점에 주의해 주세요.

• 기본적으로 Angular 것에 HTML5를 붙여야 .data- Angular는 을 .를으로써 지지합니다.data-.- Attribute에서 프리픽스. 위의 할 수 (Atribute는 Atribute의 Atribute의 Atribute는 Atribute의 Atribute의 Atribute를 지정할 수 있습니다.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 를 참조해 주세요.

따라서 인수를 컨트롤러에서 디렉티브로 전달하려면 다음 항목을 참조하십시오.

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

도움이 되었으면 좋겠는데..

컨트롤러 코드

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {
    $scope.person = {
        name:"sangeetha PH",
       address:"first Block"
    }
}]);

지시 코드

myApp.directive('searchResult',function(){
   return{
       restrict:'AECM',
       templateUrl:'directives/search.html',
       replace: true,
       scope:{
           personName:"@",
           personAddress:"@"
       }
   } 
});

사용.

파일: Directives/search.html
내용:

<h1>{{personName}} </h1>
<h2>{{personAddress}}</h2>

지시문을 사용하는 파일

<search-result person-name="{{person.name}}" person-address="{{person.address}}"></search-result>

<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"지시문에서 마우스 클릭 이벤트 개체에서 검색했습니다. event.target.getAttribute('my-directive').

범위를 포함한 클릭 이벤트에 var msg를 삽입합니다.컨트롤러가 ng-click으로 표시된 변수를 변경한 것을 바탕으로 $click을 눌러 확인합니다.

<button type="button" class="btn" ng-confirm-click="You are about to send {{quantity}} of {{thing}} selected? Confirm with OK" confirmed-click="youraction(id)" aria-describedby="passwordHelpBlock">Send</button>




app.directive('ngConfirmClick', [
  function() {
    return {
      link: function(scope, element, attr) {
        var clickAction = attr.confirmedClick;
        element.on('click', function(event) {
          var msg = attr.ngConfirmClick || "Are you sure? Click OK to confirm.";
          if (window.confirm(msg)) {
            scope.$apply(clickAction)
          }
        });
      }
    };
  }
])

언급URL : https://stackoverflow.com/questions/26409460/angularjs-pass-argument-to-directive