it-swarm.dev

وظيفة استدعاء توجيه angularjs المحددة في السمة وتمرير وسيطة لها

أريد إنشاء توجيه يرتبط بسمة. تحدد السمة الوظيفة التي يجب استدعاؤها في النطاق. ولكني أريد أيضًا تمرير وسيطة إلى الوظيفة التي يتم تحديدها داخل وظيفة الارتباط.

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

بدون تمرير المعرف يمكنني تشغيله ، لكن بمجرد محاولة تمرير وسيطة ، لم تعد الوظيفة تسمى

98
rekna

ماركو الحل يعمل بشكل جيد .

على النقيض من الطريقة الموصى بها Angular (كما هو موضح من قبل plunkr لـ treeface) هو استخدام تعبير رد اتصال والذي لا يتطلب تحديد تعبير Handler. في مثال ماركو التغيير:

في القالب

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

في وظيفة رابط التوجيه

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

هذا له عيب واحد مقارنةً بحل marko - عند التحميل لأول مرة ، سيتم استدعاء وظيفة MethodToBeCalled باستخدام myParam === غير محدد.

يمكن العثور على exampe العامل في treeface Plunker

97
johans

فقط لإضافة بعض المعلومات إلى الإجابات الأخرى - استخدام & هو وسيلة جيدة إذا كنت بحاجة إلى نطاق معزول.

الجانب السلبي الرئيسي لحل marko هو أنه يفرض عليك إنشاء نطاق معزول لعنصر ، ولكن لا يمكنك الحصول على واحد من العناصر الموجودة في عنصر ما (وإلا فستواجه خطأً زاويًا: توجيهات متعددة [التوجيه 1 ، التوجيه 2] يسأل عن نطاق معزول )

هذا يعني انت :

  • لا يمكن استخدامه على قبعة عنصر لديه نطاق معزول نفسه
  • لا يمكن استخدام اثنين من التوجيهات مع هذا الحل على نفس العنصر

نظرًا لأن السؤال الأصلي يستخدم توجيهًا يحتوي على restrict:'A' ، فقد تنشأ الحالتان في كثير من الأحيان في تطبيقات أكبر ، واستخدام نطاق معزول هنا ليس ممارسة جيدة وغير ضروري. في الواقع ، كان لدى rekna حدس جيد في هذه الحالة ، وكان يعمل تقريبًا ، الشيء الوحيد الذي كان يفعله خطأ هو استدعاء تحليل الدولار / خطأ الوظيفة (راجع ما تعيده هنا: 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); };
}
90
Robert Bak

عدم معرفة ما تريد القيام به بالضبط ... ولكن لا يزال هنا حل ممكن.

أنشئ نطاقًا بخاصية '&' - في النطاق المحلي. "يوفر طريقة لتنفيذ تعبير في سياق النطاق الأصل" (راجع وثائق التوجيه للحصول على التفاصيل).

لقد لاحظت أيضًا أنك استخدمت وظيفة ربط مختزلة وتعرضت لسمات كائن هناك. لا يمكنك فعل ذلك. من الواضح أكثر (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>
87
marko

يمكنك إنشاء توجيه ينفذ استدعاء دالة مع params باستخدام 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

6
f1lt3r

إليك ما كان يعمل بالنسبة لي.

هتمل باستخدام التوجيه

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

هتمل التوجيه: orderitem.directive.html

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

نطاق التوجيه:

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

بلدي الحل:

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

}
0
venergiac