속성에 연결되는 지시문을 만들고 싶습니다. 속성은 범위에서 호출해야하는 함수를 지정합니다. 그러나 링크 함수 내에서 결정되는 함수에 인수를 전달하고 싶습니다.

<div my-method='theMethodToBeCalled'></div>

링크 함수에서 함수에 전달해야하는 인수를 전달하는 jQuery 이벤트에 바인딩합니다.

app.directive("myMethod",function($parse) {
  restrict:'A',
  link:function(scope,element,attrs) {
     var expressionHandler = $parse(attrs.myMethod);
     $(element).on('theEvent',function( e, rowid ) {
        id = // some function called to determine id based on rowid
        scope.$apply(function() {expressionHandler(id);});
     }
  }
}

app.controller("myController",function($scope) {
   $scope.theMethodToBeCalled = function(id) { alert(id); };
}

ID를 전달하지 않고도 작동하도록 할 수 있지만 인수를 전달하려고하면 더 이상 함수가 호출되지 않습니다.

Marko의 솔루션이 잘 작동합니다. .

권장되는 Angular 방식 (treeface의 plunkr에 표시됨)과 대조적으로 expressionHandler를 정의 할 필요가없는 콜백 표현식을 사용하는 것입니다. marko의 예제 변경에서 :

템플릿에서

<div my-method="theMethodToBeCalled(myParam)"></div>

지시 링크 기능에서

$(element).click(function( e, rowid ) {
  scope.method({myParam: id});
});

이것은 marko의 솔루션에 비해 한 가지 단점이 있습니다. 처음로드 할 때 theMethodToBeCalled 함수는 myParam === undefined로 호출됩니다.

작동하는 시험은 @treeface Plunker 에서 찾을 수 있습니다.

다른 답변에 정보를 추가하려면-사용 & 격리 된 범위가 필요한 경우 하는 것이 좋습니다.

marko 솔루션의 주된 단점은 요소에 대해 격리 된 범위를 만들도록 강요한다는 것입니다. 그러나 요소에는 그중 하나만있을 수 있습니다 (그렇지 않으면 각도 오류가 발생합니다. 여러 지시문 [지시문 1, 지시문 2] 격리 된 범위 용 )

이것은 당신을 의미합니다 :

• 요소 모자에는 사용할 수 없습니다.
• 동일한 요소에서이 솔루션과 함께 두 개의 지시문을 사용할 수 없습니다.

원래 질문은 restrict:'A'두 가지 상황 모두 에서 지시문을 사용하기 때문에 더 큰 응용 프로그램에서 자주 발생할 수 있으며 여기서 격리 된 범위를 사용하는 것은 좋은 관행이 아니며 불필요합니다. 실제로 rekna는이 경우에 좋은 직관을 가졌고 거의 작동했습니다. 그가 잘못한 유일한 일은 $ parsed 함수를 잘못 호출하는 것뿐입니다 (여기에서 반환되는 내용 참조 : https://docs.angularjs.org/api/ ng / service / $ parse ).

TL; DR; 고정 질문 코드

<div my-method='theMethodToBeCalled(id)'></div>

및 코드

app.directive("myMethod",function($parse) {
  restrict:'A',
  link:function(scope,element,attrs) {
     // here you can parse any attribute (so this could as well be,
     // myDirectiveCallback or multiple ones if you need them )
     var expressionHandler = $parse(attrs.myMethod);
     $(element).on('theEvent',function( e, rowid ) {
        calculatedId = // some function called to determine id based on rowid

        // HERE: call the parsed function correctly (with scope AND params object)
        expressionHandler(scope, {id:calculatedId});
     }
  }
}

app.controller("myController",function($scope) {
   $scope.theMethodToBeCalled = function(id) { alert(id); };
}

원하는 작업을 정확히 알지 못하지만 여전히 가능한 해결책이 있습니다.

로컬 범위에서 '&'속성을 사용하여 범위를 만듭니다. "부모 범위의 컨텍스트에서 표현식을 실행하는 방법을 제공합니다"(자세한 내용은 지시문 문서 참조).

또한 속기 연결 기능을 사용하고 거기에 객체 속성을 넣었다는 것을 알았습니다. 당신은 그렇게 할 수 없습니다. 지시문 정의 객체를 반환하는 것이 더 명확합니다 (imho). 아래 내 코드를 참조하십시오.

여기에 코드 샘플과 바이올린이 있습니다.

<div ng-app="myApp">
<div ng-controller="myController">
    <div my-method='theMethodToBeCalled'>Click me</div>
</div>
</div>

<script>

   var app = angular.module('myApp',[]);

   app.directive("myMethod",function($parse) {
       var directiveDefinitionObject = {
         restrict: 'A',
         scope: { method:'&myMethod' },
         link: function(scope,element,attrs) {
            var expressionHandler = scope.method();
            var id = "123";

            $(element).click(function( e, rowid ) {
               expressionHandler(id);
            });
         }
       };
       return directiveDefinitionObject;
   });

   app.controller("myController",function($scope) {
      $scope.theMethodToBeCalled = function(id) { 
          alert(id); 
      };
   });

</script>

를 사용 attrName: "&"하여 외부 범위의 식을 참조 하여 매개 변수로 함수 호출을 실행하는 지시문을 만들 수 있습니다 .

ng-click지시문을 ng-click-x다음 과 같이 바꾸고 싶습니다 .

<button ng-click-x="add(a,b)">Add</button>

이 범위가 있다면 :

$scope.a = 2;
$scope.b = 2;

$scope.add = function (a, b) {
  $scope.result = parseFloat(a) + parseFloat(b);
}

다음과 같이 지시문을 작성할 수 있습니다.

angular.module("ng-click-x", [])

.directive('ngClickX', [function () {

  return {

    scope: {

      // Reference the outer scope
      fn: "&ngClickX",

    },

    restrict: "A",

    link: function(scope, elem) {

      function callFn () {
        scope.$apply(scope.fn());
      }

      elem[0].addEventListener('click', callFn);
    }
  };
}]);

다음은 라이브 데모입니다. http://plnkr.co/edit/4QOGLD?p=info

여기에 저에게 효과적이었습니다.

지시문을 사용하는 HTML

 <tr orderitemdirective remove="vm.removeOrderItem(orderItem)" order-item="orderitem"></tr>

지시문의 HTML : orderitem.directive.html

<md-button type="submit" ng-click="remove({orderItem:orderItem})">
       (...)
</md-button>

지침의 범위 :

scope: {
    orderItem: '=',
    remove: "&",

내 솔루션 :

1. 중합체에 이벤트를 발생 (예. complete)
2. 이벤트를 제어 기능에 연결하는 지시문 정의

지령

/*global define */
define(['angular', './my-module'], function(angular, directives) {
    'use strict';
    directives.directive('polimerBinding', ['$compile', function($compile) {

            return {
                 restrict: 'A',
                scope: { 
                    method:'&polimerBinding'
                },
                link : function(scope, element, attrs) {
                    var el = element[0];
                    var expressionHandler = scope.method();
                    var siemEvent = attrs['polimerEvent'];
                    if (!siemEvent) {
                        siemEvent = 'complete';
                    }
                    el.addEventListener(siemEvent, function (e, options) {
                        expressionHandler(e.detail);
                    })
                }
            };
        }]);
});

폴리머 성분

<dom-module id="search">

<template>
<h3>Search</h3>
<div class="input-group">

    <textarea placeholder="search by expression (eg. temperature>100)"
        rows="10" cols="100" value="{{text::input}}"></textarea>
    <p>
        <button id="button" class="btn input-group__addon">Search</button>
    </p>
</div>
</template>

 <script>
  Polymer({
    is: 'search',
            properties: {
      text: {
        type: String,
        notify: true
      },

    },
    regularSearch: function(e) {
      console.log(this.range);
      this.fire('complete', {'text': this.text});
    },
    listeners: {
        'button.click': 'regularSearch',
    }
  });
</script>

</dom-module>

페이지

 <search id="search" polimer-binding="searchData"
 siem-event="complete" range="{{range}}"></siem-search>

searchData 제어 기능입니다

$scope.searchData = function(searchObject) {
                    alert('searchData '+ searchObject.text + ' ' + searchObject.range);

}

작동합니다.

<div my-method='theMethodToBeCalled'></div>

app.directive("myMethod",function($parse) {
  restrict:'A',
  scope: {theMethodToBeCalled: "="}
  link:function(scope,element,attrs) {
     $(element).on('theEvent',function( e, rowid ) {
        id = // some function called to determine id based on rowid
        scope.theMethodToBeCalled(id);
     }
  }
}

app.controller("myController",function($scope) {
   $scope.theMethodToBeCalled = function(id) { alert(id); };
}