AngularJS - দিকনির্দেশনায় ফাংশন পাস

Question

আমি একটি উদাহরণ কৌণিক জেএস আছে

<div ng-controller="testCtrl">

<test color1="color1" updateFn="updateFn()"></test>
</div>
 <script>
  angular.module('dr', [])
.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function() {
        alert('123');
    }
})
.directive('test', function() {
    return {
        restrict: 'E',
        scope: {color1: '=',
                updateFn: '&'},
        template: "<button ng-click='updateFn()'>Click</button>",
        replace: true,
        link: function(scope, elm, attrs) { 
        }
    }
});

</script>
</body>

</html>

আমি চাই যখন আমি বোতামটি ক্লিক করব, সতর্কতা বাক্সটি উপস্থিত হবে, তবে কিছুই দেখাবে না।

আমাকে কি কেউ সাহায্য করতে পারবেন?

Answer 1

বিচ্ছিন্ন সুযোগের নির্দেশের ভিতরে থেকে প্যারেন্ট স্কোপটিতে একটি নিয়ামক ফাংশন কল করতে dash-separated, ওপির মতো এইচটিএমএলে বৈশিষ্ট্যের নাম ব্যবহার করুন names

এছাড়াও যদি আপনি আপনার ফাংশনে একটি প্যারামিটার প্রেরণ করতে চান তবে কোনও বস্তু পেরিয়ে ফাংশনটিতে কল করুন:

<test color1="color1" update-fn="updateFn(msg)"></test>

জাতীয়

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

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='updateFn({msg : \"Hello World!\"})'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {             
        }
    }
});

Fiddle

Comments

আপনার উত্তরের জন্য কোডজিলাকে ধন্যবাদ, এবং আমি যখন পরিস্থিতি সম্পর্কে জিজ্ঞাসা করতে চাই যখন আমি "আপডেটফএন" ফাংশনটি প্যারেন্ট স্কোপ থেকে নির্দেশ "পরীক্ষায়" ফাঁক করে আলাদা করতে পারি, তখন কি সম্ভব?

— ব্যবহারকারী2707026

replace: অ্যাট্রিবিউট AngularJS মধ্যে অবচিত হয়েছে stackoverflow.com/questions/24194972/...

— cdmckay

কোন কারণে তর্কটি আমার পক্ষে অপরিজ্ঞাত।

— chovy

@ শেভি আমার মনে হয় আপনি একবারে পদ্ধতিটি আবার কল করার পরে যুক্তিটি কেবলমাত্র ব্যবহৃত হবে? প্রথম উন্মুক্ত বন্ধনীর ব্যবহারটি এমন বিন্যাস হিসাবে মনে হচ্ছে যে

— কৌণিকটি

updateFn({msg: 'my message'});নির্দেশকের linkফাংশনের অভ্যন্তরে ফাংশন কল করার সময় কোনও অবয়ব ম্যাপিং সেই বিন্যাসে ব্যবহার করতে হবে ।

— ব্রায়ান

Answer 2

সম্ভবত আমি কিছু মিস করছি, তবে অন্য সমাধানগুলি প্যারেন্ট স্কোপ ফাংশনটিকে ডাকে যদিও নির্দেশিক কোড থেকে আর্গুমেন্টগুলি পাস করার কোনও ক্ষমতা নেই , উদাহরণস্বরূপ, কারণ নির্দিষ্ট পরামিতিগুলির সাথে update-fnকল করা হচ্ছে । সামান্য পরিবর্তন নির্দেশকে যুক্তিগুলি পাস করার অনুমতি দেয় যা আমি মনে করি এটি আরও বেশি কার্যকর isupdateFn(){msg: "Hello World"}

<test color1="color1" update-fn="updateFn"></test>

নোট করুন যে এইচটিএমএল কোনও ()বন্ধন ছাড়াই একটি ফাংশন রেফারেন্স পাস করছে b

জাতীয়

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

app.controller("testCtrl", function($scope) {
    $scope.color1 = "color";
    $scope.updateFn = function(msg) {        
        alert(msg);
    }
});

app.directive('test', function() {
    return {
        restrict: 'E',
        scope: {
            color1: '=',
            updateFn: '&'
        },
        // object is passed while making the call
        template: "<button ng-click='callUpdate()'>
            Click</button>",
        replace: true,        
        link: function(scope, elm, attrs) {       
          scope.callUpdate = function() {
            scope.updateFn()("Directive Args");
          }
        }
    }
});

সুতরাং উপরের অংশে, এইচটিএমএল লোকাল স্কোপ callUpdateফাংশনকে কল করছে , যা প্যারেন্ট স্কোপ থেকে আপডেটফ্যানটি 'আনয়ন' করে এবং নির্দেশটি উত্পন্ন করতে পারে এমন পরামিতিগুলির সাথে ফিরে ফাংশনটিকে কল করে।

http://jsfiddle.net/mygknek2/

Comments

নিশ্চিত না যে আমি কীভাবে কার্যকর এমন কোনও কাজের জন্য ডাউন ভোট পেতে পারি ?? ভোট নেমে গেলে আপনার মন্তব্য করা উচিত।

— স্টিভ

এটি আমার পক্ষে কাজ করেছে। আপনি যদি অতিরিক্ত ফাংশনটি না চান তবে কেবল লিখুনng-click="updateFn()('Directive Args')"

— গ্রাহাম ওয়াল্টার্স

ওহউ! স্কোপ.আপডেটএফএন () ("দিকনির্দেশক আরগস"); !! না স্কোপ.আপডেটএফএন ("দিকনির্দেশক আরগস"); !!!

— ফুং ডি একটি

এটি প্রকৃতপক্ষে আরও নিখুঁত উত্তর !!

— ভিনিশ

@ লুড্বিক ১১ নিশ্চিত - এর কারণ স্কুপ.আপডেটফএন যখন এর মতো সংজ্ঞায়িত করা হয় তখন একটি ফাংশন যা কোনও ফাংশন দেয় (তাই () ()) এবং এটি কারণ আমরা স্কোপে (এইচটিএমএল-আপডেট-এফএন = "আপডেটএফএন" এর মাধ্যমে) একটি রেফারেন্স পাস করি) আমরা কল করতে চান ফাংশন। 1 ম () হ'ল এই রেফারেন্সটি ফেরত দেওয়ার জন্য কৌনিকের কাছে একটি কল, ২ য় () আমাদের ফাংশনে কল করে এবং যেখানে আমরা কোনও পরামিতিগুলি পাস করি। এইচটিএইচ

— স্টিভ

Answer 3

আপনার 'পরীক্ষার' নির্দেশনা এইচটিএমএল ট্যাগে, ফাংশনটির গুণাবলীর নামটি উটকেসেড হওয়া উচিত নয় , তবে ড্যাশ-ভিত্তিক হওয়া উচিত ।

সুতরাং - পরিবর্তে:

<test color1="color1" updateFn="updateFn()"></test>

লিখুন:

<test color1="color1" update-fn="updateFn()"></test>

নির্দেশক বৈশিষ্ট্যগুলির মধ্যে পার্থক্য জানানোর এটি কৌণিকর উপায় (যেমন আপডেট-এফএন ফাংশন) এবং ফাংশন।

Comments

ধরার জন্য ধন্যবাদ আমি আমার উত্তরে এটি অন্তর্ভুক্ত করেছি। ভোট দিয়েছেন! :)

— সর্বদা আধ্যাত্মিক

Answer 4

দ্বি নির্দেশমূলক বাঁধাইয়ের সাথে নিয়ন্ত্রণকারী ফাংশনটি কীভাবে পাশ করা যায় ? তারপরে আপনি এটিকে নিয়মিত টেমপ্লেটের মতো ঠিক একইভাবে নির্দেশিকায় ব্যবহার করতে পারেন (সরলতার জন্য আমি অপ্রাসঙ্গিক অংশগুলি ছিটিয়েছি):

<div ng-controller="testCtrl">

   <!-- pass the function with no arguments -->
   <test color1="color1" update-fn="updateFn"></test>
</div>

<script>
   angular.module('dr', [])
   .controller("testCtrl", function($scope) {
      $scope.updateFn = function(msg) {
         alert(msg);
      }
   })
   .directive('test', function() {
      return {
         scope: {
            updateFn: '=' // '=' bidirectional binding
         },
         template: "<button ng-click='updateFn(1337)'>Click</button>"
      }
   });
</script>

আমি এই প্রশ্নে অবতরণ করেছি, কারণ আমি আগুনের উপরের পদ্ধতিটি চেষ্টা করেছি, তবে কোনওভাবে এটি কার্যকর হয়নি। এখন এটি পুরোপুরি কাজ করে।

Answer 5

অ্যাট্রিবিউট নামের জন্য ড্যাশ এবং লোয়ার কেস ব্যবহার করুন (অন্যান্য উত্তরগুলির মতো বলেছেন):

 <test color1="color1" update-fn="updateFn()"></test>

এবং নির্দেশের সুযোগে "&" এর পরিবর্তে "=" ব্যবহার করুন:

 scope: { updateFn: '='}

তারপরে আপনি অন্য ফাংশনের মতো আপডেটফেন ব্যবহার করতে পারেন:

 <button ng-click='updateFn()'>Click</button>

এই নাও!

Comments

আপনি কেন 'ও' এর পরিবর্তে '=' ব্যবহার করবেন? যখন আমি এটি চেষ্টা করেছিলাম এটি বার বার আমার ফাংশনটি কল করে।

— ব্যবহারকারী 1012500

এটির জন্য '=' ব্যবহার করা ভুল। এটি দ্বিমুখী অবজেক্ট বাইন্ডিংয়ের জন্য।

— বেন টালিডিয়োরোস

আমি মনে করি, প্রথম টেম্পলেটটিতে প্রথম বন্ধনীর ব্যবহার একমাত্র সমস্যা। এটি কার্য সম্পাদন করে তারপরে ফলাফলকে আবদ্ধ করে। পরিবর্তে আপনার এই ফাংশনটির নামটি অবশ্যই পাস করা উচিত:update-fn="updateFn"

— মার্টন ট্যামস

খারাপ উত্তর। খুব খারাপ.

— 1:37

Answer 6

আমাকে "&" এর পরিবর্তে "=" বাইন্ডিং ব্যবহার করতে হয়েছিল কারণ এটি কাজ করে না। অদ্ভুত আচরণ.

Comments

এর কারণ আপনি সম্ভবত মৃত্যুদন্ড কার্যকর করার পরিবর্তে জেএস ফাংশন রেফারেন্সটি পাস করছেন। আপনি যখন নির্দেশকে যুক্তি হিসাবে ফাংশনটি পাস করেন তখন আপনাকে update-fn="updateFn()"অবশ্যই প্রথম বন্ধনী (এবং সম্ভবত প্যারাম) অন্তর্ভুক্ত করতে হবে। এটি কোনও ফাংশন রেফারেন্স হিসাবে পাস করা বাইন্ডিংয়ের update-fn="updateFn"সাথে কাজ করবে না&

— জর্জিজিআরসি

Answer 7

@ জর্জেজিআরসি আপনার উত্তরের জন্য ধন্যবাদ। যদিও একটি জিনিস, "সম্ভবত" অংশটি খুব গুরুত্বপূর্ণ। আপনি প্যারামিটার (গুলি) আছে, তাহলে আপনি আপনার টেমপ্লেট হিসাবে ভাল অন্তর্ভুক্ত করা আবশ্যক এটা / তাদের এবং আপনার উল্লেখ নিশ্চিত করা স্থানীয়দের যেমন updateFn({msg: "Directive Args"}।