103

属性にリンクするディレクティブを作成したいと考えています。この属性は、スコープで呼び出される関数を指定します。しかし、リンク関数内で決定される引数を関数に渡したいとも考えています。

<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を渡さなくても機能しますが、引数を渡そうとするとすぐに関数が呼び出されなくなります

4

7 に答える 7

96

他の回答に情報を追加するだけです-&分離されたスコープが必要な場合は、使用するのが良い方法です。

marko のソリューションの主な欠点は、要素に孤立したスコープを作成することを強制することですが、要素にはそのうちの 1 つしか持てません (そうしないと、Angular エラーが発生します:複数のディレクティブ [directive1, directive2] を要求分離スコープ用）

これはあなたを意味します：

  • 分離スコープ自体を持つ要素ハットでは使用できません
  • このソリューションでは、同じ要素で 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); };
}
于 2014-06-14T22:49:31.920 に答える
6

attrName: "&"を使用して外側のスコープで式を参照することにより、params を使用して関数呼び出しを実行するディレクティブを作成できます。

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

于 2015-11-05T19:11:32.540 に答える
2

これが私のために働いたものです。

ディレクティブを使用した 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: "&",
于 2016-09-05T23:57:13.063 に答える
0

私の解決策：

  1. on Polymer イベントを発生させます (例: 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);

}
于 2016-03-01T15:35:23.967 に答える