Я хочу создать директиву, которая ссылается на атрибут. Атрибут определяет функцию, которая должна быть вызвана в области видимости. Но я также хочу передать аргумент функции, которая определяется внутри функции ссылки.

<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); };
}

Без передачи идентификатора я могу заставить его работать, но как только я пытаюсь передать аргумент, функция больше не вызывается

Решение Марко работает хорошо .

В отличие от рекомендованного способа Angular (как показано plunkr treeface) следует использовать выражение обратного вызова, которое не требует определения expressionHandler. В примере Марко изменение:

В шаблоне

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

В функции директивы ссылки

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

У этого есть один недостаток по сравнению с решением Марко - при первой загрузке функцияMethodToBeCalled будет вызываться с 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); };
}