কৌণিক জেএস নির্দেশিকার জন্য কি কোনও পোস্ট রেন্ডার কলব্যাক রয়েছে?

Question

টেম্পলেটটির উপাদানটিতে এর মতো যুক্ত হওয়ার জন্য আমি কেবলমাত্র নিজের নির্দেশটি পেয়েছি:

# CoffeeScript
.directive 'dashboardTable', ->
  controller: lineItemIndexCtrl
  templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
  (scope, element, attrs) ->
    element.parent('table#line_items').dataTable()
    console.log 'Just to make sure this is run'

# HTML
<table id="line_items">
    <tbody dashboard-table>
    </tbody>
</table>

আমি ডেটা টেবিলস নামে একটি জিকিউরি প্লাগইনও ব্যবহার করছি। এটির সাধারণ ব্যবহার এরকম: $ ('টেবিল # কিছু_আইডি') data ডেটা টেবিল ()। আপনি সারণির ডেটা সরবরাহ করার জন্য জেএসএন ডেটাতে ডেটা টেবিল () কলটিতে যেতে পারেন অথবা আপনি পৃষ্ঠাটিতে ইতিমধ্যে ডেটা রাখতে পারেন এবং এটি বাকিটি করবে will এইচটিএমএল পৃষ্ঠায় ইতিমধ্যে সারিগুলি রেখে আমি পরে করছি am ।

তবে সমস্যাটি হ'ল আমাকে ডেমের পরে টেবিলে # লাইন_সাইটগুলি উপাত্ত টেবিল () কল করতে হবে। উপরে আমার নির্দেশিকাটি টেমপ্লেটটিকে নির্দেশকের উপাদানটিতে যুক্ত করার আগে ডেটা টেবিল () পদ্ধতিটি কল করে। সংযোজনের পরে ফাংশনগুলিতে কল করার কোনও উপায় আছে কি?

আপনার সাহায্যের জন্য ধন্যবাদ!

অ্যান্ডির উত্তরের পরে 1 আপডেট করুন:

আমি নিশ্চিত করতে চাই যে লিঙ্ক পদ্ধতিটি কেবলমাত্র পৃষ্ঠাটিতে রয়েছে তারপরেই ডাকা হবে যাতে আমি কিছুটা পরীক্ষার জন্য নির্দেশকে পরিবর্তন করেছি:

# CoffeeScript
#angular.module(...)
.directive 'dashboardTable', ->
    {
      link: (scope,element,attrs) -> 
        console.log 'Just to make sure this gets run'
        element.find('#sayboo').html('boo')

      controller: lineItemIndexCtrl
      template: "<div id='sayboo'></div>"

    }

এবং আমি সত্যিই ডিভি # সাইবুতে "বু" দেখতে পাচ্ছি।

তারপরে আমি আমার jquery ডেটাটেবল কল চেষ্টা করি

.directive 'dashboardTable',  ->
    {
      link: (scope,element,attrs) -> 
        console.log 'Just to make sure this gets run'
        element.parent('table').dataTable() # NEW LINE

      controller: lineItemIndexCtrl
      templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
    }

ভাগ্য নেই

তারপরে আমি একটি সময় যোগ করার চেষ্টা করব:

.directive 'dashboardTable', ($timeout) ->
    {
      link: (scope,element,attrs) -> 
        console.log 'Just to make sure this gets run'
        $timeout -> # NEW LINE
          element.parent('table').dataTable()
        ,5000
      controller: lineItemIndexCtrl
      templateUrl: "<%= asset_path('angular/templates/line_items/dashboard_rows.html') %>"
    }

এবং যে কাজ করে। সুতরাং আমি ভাবছি কোডটির নন-টাইমার সংস্করণে কী ভুল হয়?

Comments

@ অ্যাডারডিজাইন না আমি কখনই করি নি, আমাকে টাইমার ব্যবহার করতে হয়েছিল। কিছু কারণে, কলব্যাক এখানে কলব্যাক নয়, সত্যই। আমার কাছে 11 টি কলাম এবং 100 টি সারি সহ একটি টেবিল রয়েছে, তাই স্বাভাবিকভাবেই কৌণিকের সাথে ডাটা বাইন্ডিংয়ের জন্য ব্যবহার করা ভাল বেটের মতো লাগে; তবে আমার jquery ডেটাবেবল প্লাগইনও ব্যবহার করা দরকার যা $ ('টেবিল') এর মতো সহজ dat নির্দেশ ব্যবহার করে বা কেবল সমস্ত সারি দিয়ে একটি বোবা জসন বস্তু রাখুন এবং পুনরাবৃত্তি করতে এনজি-রিপিট ব্যবহার করুন, টেবিলের এইচটিএমএল উপাদানটি রেন্ডার করার পরে চালাতে আমি আমার $ ()। ডেটেটেবল () পেতে পারি না, সুতরাং আমার ট্রিকটি বর্তমানে টাইমারকে করতে হবে দৈর্ঘ্য> 3 (শিরোনাম / পাদচরণের বি / সি)

— নিক তাই

@ অ্যাডার্ডাইন এবং হ্যাঁ, আমি সমস্ত সংকলন পদ্ধতি চেষ্টা করেছি, পদ্ধতিগুলি পোস্টলিঙ্ক / প্রিলিংকযুক্ত কোনও বস্তু ফিরিয়ে আনার পদ্ধতিটি সংকলন পদ্ধতি, কেবল একটি ফাংশন (যথা লিঙ্কিং ফাংশন) ফেরত সংকলন পদ্ধতি, সংযোগ পদ্ধতি (সংকলন পদ্ধতি ছাড়াই কারণ যতদূর আমি বলতে পারি, যদি আপনার কাছে একটি সংকলন পদ্ধতি থাকে যা কোনও লিঙ্কিংয়ের পদ্ধতি ফেরত দেয় তবে লিঙ্কিং ফাংশনটি এড়ানো হবে) .. কোনওটিই কাজ করেনি তাই ভাল পুরানো $ সময়সীমার উপর নির্ভর করতে হবে। আমি আরও ভালভাবে কাজ করে এমন কিছু খুঁজে পেলে বা কেবল যখন কলব্যাকটি সত্যই কলব্যাকের মতো কাজ করে এমনটি খুঁজে পেলে এই পোস্টটি আপডেট করবে

— নিক তাই

Answer 1

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

$timeout(function () {
    //DOM has finished rendering
});

Comments

এতে কেন নয় ব্যাখ্যা করা হয় ডক্স ?

— গাই

আপনি ঠিক বলেছেন, আমার উত্তরটি কিছুটা বিভ্রান্তিকর কারণ আমি এটিকে সহজ করার চেষ্টা করেছি। পুরো উত্তরটি হ'ল এই প্রভাবটি কৌণিকের নয় বরং ব্রাউজারের ফলাফল। $timeout(fn)চূড়ান্তভাবে কলগুলি setTimeout(fn, 0)যা জাভাস্ক্রিপ্টের প্রয়োগের ক্ষেত্রে বাধা সৃষ্টি করে এবং সেই জাভাস্ক্রিপ্ট কার্যকর করা চালিয়ে যাওয়ার আগে ব্রাউজারটিকে প্রথমে সামগ্রীটি রেন্ডার করতে দেয়।

— সংসদ

ব্রাউজারটিকে কিছু নির্দিষ্ট কাজ যেমন "জাভাস্ক্রিপ্ট এক্সিকিউশন" এবং "ডিওএম রেন্ডারিং" আলাদাভাবে সজ্জিত করে দেখুন এবং সেটটাইমআউট (এফএন, 0) রেন্ডারিংয়ের পরে বর্তমানে চলমান "জাভাস্ক্রিপ্ট এক্সিকিউশন" -কে কিউয়ের পিছনে ফেলে দেয়? ।

— সংসদ

@ গ্যাবলেউক্স হ্যাঁ, effect টাইমআউট বাদে effect সুযোগ calling কল করার অতিরিক্ত সুবিধা রয়েছে except ব্যতীত একই প্রভাব ফেলবে it এটি চালানোর পরে প্রয়োগ () প্রয়োগ করুন। _.ডিফার () এর সাহায্যে মাই ফাংশন স্কোপে ভেরিয়েবল পরিবর্তন করে থাকলে আপনাকে এটিকে ম্যানুয়ালি কল করতে হবে।

— সংসদ

আমার এমন দৃশ্যের মুখোমুখি হচ্ছে যেখানে পৃষ্ঠা 1 এনজি-রিপিটে উপাদানগুলির গুচ্ছটি রেন্ডার করে সেখানে সহায়তা করে না, তারপরে আমি পৃষ্ঠা 2 এ যাই এবং তারপরে আমি পৃষ্ঠা 1 এ ফিরে যাই এবং আমি এনজি-পুনরাবৃত্তি উপাদানগুলির পিতামাতাদের উচ্চতর পেতে চেষ্টা করি ... এটি ভুল উচ্চতা ফিরে আসে। আমি যদি 1000 মিমিগুলির মতো টাইমআউট করি তবে এটি কার্যকর হয়।

— yodalr

Answer 2

আমারও একই সমস্যা ছিল এবং আমি বিশ্বাস করি উত্তরটি আসলেই নেই। গ্রুপে মিয়াকোর মন্তব্য এবং কিছু আলোচনা দেখুন ।

কৌণিকটি ট্র্যাক করতে পারে যে এটি ডিওএমকে হেরফের করার জন্য সমস্ত ফাংশন কল করেছে এটি সম্পূর্ণ, তবে যেহেতু এই ফাংশনগুলি অ্যাসিঙ্ক লজিককে ট্রিগার করতে পারে যা তারা ফিরে আসার পরেও ডমকে আপডেট করে চলেছে, সুতরাং কৌনিকটি এটি সম্পর্কে জানার আশা করা যায় না। কোন কলব্যাক কৌণিক দেয় পারে কখনো কখনো কাজ করে, কিন্তু উপর নির্ভর করা নিরাপদ হবে না।

আমরা যেমনটি করেছি ঠিক তেমনই সেটটাইমআউট দিয়ে সমাধান করেছি।

(দয়া করে মনে রাখবেন যে সবাই আমার সাথে একমত নন - আপনার উপরের লিঙ্কগুলিতে মন্তব্যগুলি পড়তে হবে এবং আপনার কী মনে হয় দেখুন))

Answer 3

আপনি 'লিঙ্ক' ফাংশনটি ব্যবহার করতে পারেন, এটি পোস্টলিঙ্ক নামেও পরিচিত, যা টেম্পলেটটি রাখার পরে চলে।

app.directive('myDirective', function() {
  return {
    link: function(scope, elm, attrs) { /*I run after template is put in */ },
    template: '<b>Hello</b>'
  }
});

আপনি যদি নির্দেশনা তৈরির পরিকল্পনা করেন তবে এটি পড়ুন, এটি একটি বড় সহায়তা: http://docs.angularjs.org/guide/directive

Comments

হাই অ্যান্ডি, উত্তর দেওয়ার জন্য আপনাকে অনেক ধন্যবাদ; আমি লিঙ্ক ফাংশনটি চেষ্টা করেছিলাম তবে আপনি কোড করার সাথে সাথে আবার চেষ্টা করে দেখলে আমার আপত্তি হবে না; আমি গত 1.5 দিনটি সেই নির্দেশিকা পৃষ্ঠাতে পড়েছি; এবং কৌণিকের সাইটে উদাহরণগুলিও দেখছি। আপনার কোড এখন চেষ্টা করবে।

— নিক তাই

আহ্, আমি এখন দেখছি আপনি লিঙ্কটি করার চেষ্টা করছেন কিন্তু আপনি এটি ভুল করছেন। আপনি যদি কেবল কোনও ফাংশনটি ফিরিয়ে দেন তবে এটি লিঙ্ক হিসাবে ধরে নেওয়া হবে। আপনি যদি কোনও বস্তুটি ফেরত দেন, আপনাকে এটি 'লিঙ্ক' হিসাবে কী দিয়ে ফিরিয়ে দিতে হবে। আপনি আপনার সংকলন ফাংশন থেকে একটি লিঙ্কিং ফাংশনও ফিরে আসতে পারেন।

— অ্যান্ড্রু জোসলিন

হাই অ্যান্ডি, আমার ফলাফলগুলি ফিরে পেয়েছে; আমি প্রায় আমার বিচক্ষণতা হারিয়েছি, কারণ আমি এখানে আপনার উত্তরটি যা বলেছি তা মূলত আমি করেছি। দয়া করে আমার আপডেটটি দেখুন

— নিক সো

হুম, এরকম কিছু চেষ্টা করুন: <টেবিল আইডি = "বব"> <tbody ড্যাশবোর্ড-টেবিল = "# বব"> </tbody> </table> তারপরে আপনার লিঙ্কে, $ (attrs.dashboardTable) .ডাটা টেবিল () করুন এটি সঠিকভাবে নির্বাচিত হচ্ছে তা নিশ্চিত করুন। অথবা আমার ধারণা আপনি ইতিমধ্যে এটি চেষ্টা করে গেছেন .. লিঙ্কটি কাজ করছে না কিনা তা আমি সত্যিই নিশ্চিত নই।

— অ্যান্ড্রু জোসলিন

এইটি আমার জন্য কাজ করেছিল, আমি আমার প্রয়োজনীয়তার জন্য টেমপ্লেটটি ডোম পোস্টের মধ্যে উপাদানগুলি সরিয়ে নিতে চেয়েছিলাম, লিঙ্ক

— অভি

Answer 4

যদিও আমার উত্তর ডেটেবলের সাথে সম্পর্কিত নয় এটি ডিওএম ম্যানিপুলেশন এবং উদাহরণস্বরূপ jQuery প্লাগইন সূচনা হিসাবে উপাদানগুলির জন্য নির্দেশাবলী যা তাদের বিষয়বস্তু async পদ্ধতিতে আপডেট করা হয়েছে তা নির্দেশ করে addresses

একটি সময়সীমা কার্যকর করার পরিবর্তে কেউ কেবল এমন একটি ঘড়ি যুক্ত করতে পারে যা সামগ্রী পরিবর্তনগুলি (বা এমনকি অতিরিক্ত বাহ্যিক ট্রিগার )ও শুনবে।

আমার ক্ষেত্রে আমি এনজি-রিপিট করা হয়ে গেলে আমার অভ্যন্তরীণ ডোম তৈরি হওয়ার পরে একবার jQuery প্লাগইন শুরু করার জন্য এই কাজটি ব্যবহার করেছি - অন্য ক্ষেত্রে স্কোপের সম্পত্তি নিয়ন্ত্রকের পরিবর্তিত হওয়ার পরে আমি এটি কেবল ডমকে হেরফের করার জন্য ব্যবহার করেছি। এখানে আমি কীভাবে ...

এইচটিএমএল:

<div my-directive my-directive-watch="!!myContent">{{myContent}}</div>

জাতীয়:

app.directive('myDirective', [ function(){
    return {
        restrict : 'A',
        scope : {
            myDirectiveWatch : '='
        },
        compile : function(){
            return {
                post : function(scope, element, attributes){

                    scope.$watch('myDirectiveWatch', function(newVal, oldVal){
                        if (newVal !== oldVal) {
                            // Do stuff ...
                        }
                    });

                }
            }
        }
    }
}]);

দ্রষ্টব্য: কেবলমাত্র আমার নির্দেশিকা-ঘড়ির বৈশিষ্ট্যে বায়ুতে মাই কনটেন্ট ভেরিয়েবলটি ingালার পরিবর্তে সেখানে যে কোনও স্বেচ্ছাসেবী অভিব্যক্তি কল্পনা করা যায়।

দ্রষ্টব্য: উপরোক্ত উদাহরণের মতো স্কোপটি বিচ্ছিন্ন করে কেবলমাত্র উপাদান প্রতি একবার করা যেতে পারে - একই উপাদানটিতে একাধিক নির্দেশাবলীর সাহায্যে চেষ্টা করার ফলে $ সংকলন: মাল্টিডির ত্রুটি ঘটবে - দেখুন: https://docs.angularjs.org / ত্রুটি / $ কম্পাইল / multidir

Answer 5

এই প্রশ্নের উত্তর দিতে দেরি হতে পারে। তবে তবুও কেউ আমার উত্তর থেকে সুবিধা পেতে পারে।

আমার অনুরূপ সমস্যা ছিল এবং আমার ক্ষেত্রে আমি নির্দেশিকাটি পরিবর্তন করতে পারি না, কারণ এটি একটি গ্রন্থাগার এবং লাইব্রেরির কোড পরিবর্তন করা ভাল অভ্যাস নয়। সুতরাং আমি যা করেছি তা হল পৃষ্ঠার লোডের জন্য অপেক্ষা করার জন্য একটি ভেরিয়েবল ব্যবহার করা এবং নির্দিষ্ট উপাদানটিকে রেন্ডার করার জন্য আমার এইচটিএমটিএলের ভিতরে এনজি-ইফ ব্যবহার করা use

আমার নিয়ামক:

$scope.render=false;

//this will fire after load the the page

angular.element(document).ready(function() {
    $scope.render=true;
});

আমার এইচটিএমএলে (আমার ক্ষেত্রে এইচটিএমএল উপাদানটি একটি ক্যানভাস)

<canvas ng-if="render"> </canvas>

Answer 6

আমার একই সমস্যা ছিল, তবে কৌনিক + ডেটা টেবিলটি একটি fnDrawCallback+ সারি গোষ্ঠীকরণ + $ সহ নেস্টেড নির্দেশাবলী সংকলিত ব্যবহার করে। fnDrawCallbackপৃষ্ঠাগুলি রেন্ডারিং ঠিক করার জন্য আমি আমার ফাংশনে $ টাইমআউট রেখেছি ।

উদাহরণস্বরূপ, সারি_গ্রুপিং উত্সের ভিত্তিতে:

var myDrawCallback = function myDrawCallbackFn(oSettings){
  var nTrs = $('table#result>tbody>tr');
  for(var i=0; i<nTrs.length; i++){
     //1. group rows per row_grouping example
     //2. $compile html templates to hook datatable into Angular lifecycle
  }
}

উদাহরণস্বরূপ:

var myDrawCallback = function myDrawCallbackFn(oSettings){
  var nTrs = $('table#result>tbody>tr');
  $timeout(function requiredRenderTimeoutDelay(){
    for(var i=0; i<nTrs.length; i++){
       //1. group rows per row_grouping example
       //2. $compile html templates to hook datatable into Angular lifecycle
    }
  ,50); //end $timeout
}

এমনকি একটি সংক্ষিপ্ত সময়সীমা বিলম্বও অ্যাঙ্গুলারকে আমার সংকলিত কৌণিক নির্দেশাবলী রেন্ডার করার জন্য যথেষ্ট ছিল।

Comments

শুধু কৌতূহলী, আপনার কাছে অনেকগুলি কলাম সহ একটি বড় টেবিল রয়েছে? কারণ আমি খুঁজে পেয়েছি যে আমার একটি বিরক্তিকর প্রচুর পরিমাণে মিলিসেকেন্ড (> 100) দরকার তাই ডেটা টেবিলটি () কলকে ডেকে না দেওয়া

— নিক তাই

আমি দেখতে পেয়েছি 2 সারি থেকে 150 টিরও বেশি সারির ফলাফল সেটগুলির জন্য ডেটা টেবিল পৃষ্ঠা নেভিগেশনে সমস্যাটি ঘটেছে । সুতরাং, না - আমি মনে করি না যে টেবিলের আকারটি ইস্যুটি ছিল, তবে সম্ভবত ডেটা টেবিল mill কিছু মিলিসেকেন্ড দূরে চিবানোর জন্য যথেষ্ট উপস্থাপনের ওভারহেড যুক্ত করেছে। আমার ফোকাসটি ন্যূনতম অ্যাঙ্গুলারজেএস ইন্টিগ্রেশন সহ ডেটাটেবেলে কাজ করার জন্য সারি-গ্রুপিংয়ের দিকে ছিল।

— জেজে জব্বার

Answer 7

আমার জন্য কাজ করা সমাধানগুলির একটিও টাইমআউট ব্যবহার করা গ্রহণ করে না। এটি কারণ আমি একটি টেম্পলেট ব্যবহার করছিলাম যা পোস্টলিংকের সময় গতিশীলভাবে তৈরি হয়েছিল।

তবে নোট করুন, টাইমআউটটি ব্রাউজারের কাতারে কল করা ফাংশনটি যুক্ত করার সাথে সাথে '0' এর টাইমআউট হতে পারে যা কৌণিক রেন্ডারিং ইঞ্জিনের পরে ঘটবে কারণ এটি ইতিমধ্যে সারিতে রয়েছে।

এটি দেখুন: http://blog.brunoscopelliti.com/run-a-directive- after-the-dom-has-finised-rendering

Answer 8

অগভীর রেন্ডারের পরে ক্রিয়াগুলি প্রোগ্রাম করার জন্য এখানে একটি নির্দেশ রয়েছে। অগভীর দ্বারা আমি এটা যে খুব উপাদান অনুষ্ঠিত পর মূল্যায়ন করবে মানে এবং যে অসম্পর্কিত হতে হবে যখন এটির সামগ্রীগুলি অনুষ্ঠিত হয়। সুতরাং আপনার যদি পোস্ট উপস্থাপনের পদক্ষেপের জন্য কিছু উপ উপাদানের প্রয়োজন হয় তবে আপনার এটি ব্যবহারের বিষয়টি বিবেচনা করা উচিত:

define(['angular'], function (angular) {
  'use strict';
  return angular.module('app.common.after-render', [])
    .directive('afterRender', [ '$timeout', function($timeout) {
    var def = {
        restrict : 'A', 
        terminal : true,
        transclude : false,
        link : function(scope, element, attrs) {
            if (attrs) { scope.$eval(attrs.afterRender) }
            scope.$emit('onAfterRender')
        }
    };
    return def;
    }]);
});

তাহলে আপনি এটি করতে পারেন:

<div after-render></div>

বা কোনও কার্যকর অভিব্যক্তি সহ:

<div after-render="$emit='onAfterThisConcreteThingRendered'"></div>

Comments

সামগ্রীটি রেন্ডার হওয়ার পরে এটি আসলে নয় really আমি যদি <বিভাজন পরে-রেন্ডার> div {ব্লাহ}} </div> উপাদানটির ভিতরে এই অভিব্যক্তি প্রকাশ করি তবে প্রকাশটি এখনও মূল্যায়ন করা হয় না। লিঙ্ক ফাংশনের ভিতরে ডিভের সামগ্রীগুলি এখনও still lah ব্লাহ lah is। সুতরাং প্রযুক্তিগতভাবে আপনি সামগ্রীটি রেন্ডার হওয়ার আগে ইভেন্টটি ফায়ার করছেন।

— এডওয়ার্ড ওলামিসান

রেন্ডার অ্যাকশন দেওয়ার পরে এটি অগভীর, আমি কখনও এটিকে গভীর বলে দাবি করিনি

— সেবাস্তিয়ান সাস্ট্রে

Answer 9

আমি নিম্নলিখিত নির্দেশের সাথে এই কাজ পেয়েছি:

app.directive('datatableSetup', function () {
    return { link: function (scope, elm, attrs) { elm.dataTable(); } }
});

এবং এইচটিএমএলে:

<table class="table table-hover dataTable dataTable-columnfilter " datatable-setup="">

উপরেরটি যদি আপনার পক্ষে কাজ না করে তবে শুটিংয়ের সমস্যা হয় trouble

1) নোট করুন যে 'ডেটাটেবলসেটআপ' 'ডেটাটেবল-সেটআপ' এর সমতুল্য। কৌনিকটি উটের ক্ষেত্রে ফর্ম্যাটটি পরিবর্তন করে।

২) নির্দেশের আগে অ্যাপটি সংজ্ঞায়িত হয়েছে তা নিশ্চিত করুন। যেমন সহজ অ্যাপ্লিকেশন সংজ্ঞা এবং নির্দেশনা।

var app = angular.module('app', []);
app.directive('datatableSetup', function () {
    return { link: function (scope, elm, attrs) { elm.dataTable(); } }
});

Answer 10

লোড অর্ডারটি প্রত্যাশা করা যায় না এই বিষয়টি অনুসরণ করে, একটি সহজ সমাধান ব্যবহার করা যেতে পারে।

চলুন চলুন ডিরেক্টরটিভ-ডিরেক্টর-ইউজারের 'সম্পর্কের দিকে নজর দিন। সাধারণত নির্দেশের ব্যবহারকারী নির্দেশকে কিছু ডেটা সরবরাহ করে বা কিছু কার্যকারিতা (ফাংশন) নির্দেশিকা সরবরাহ করে। অন্যদিকে দিকনির্দেশনাটি আশা করে যে এর স্কোপটিতে কিছু ভেরিয়েবল সংজ্ঞায়িত হবে।

যদি আমরা নিশ্চিত করতে পারি যে সমস্ত খেলোয়াড়রা তাদের ক্রিয়াটি কার্যকর করার চেষ্টা করার আগে তাদের সমস্ত কর্মের প্রয়োজনীয়তা পূরণ করেছে - সবকিছু ঠিকঠাক হওয়া উচিত।

এবং এখন নির্দেশ:

app.directive('aDirective', function () {
    return {
        scope: {
            input: '=',
            control: '='
        },
        link: function (scope, element) {
            function functionThatNeedsInput(){
                //use scope.input here
            }
            if ( scope.input){ //We already have input 
                functionThatNeedsInput();
            } else {
                scope.control.init = functionThatNeedsInput;
            }
          }

        };
})

এবং এখন নির্দেশের এইচটিএমএল ব্যবহারকারী

<a-directive control="control" input="input"></a-directive>

এবং কোথাও নির্দেশকের ব্যবহারকারী উপাদানটির নিয়ন্ত্রকের মধ্যে রয়েছে:

$scope.control = {};
...
$scope.input = 'some data could be async';
if ( $scope.control.functionThatNeedsInput){
    $scope.control.functionThatNeedsInput();
}

এটা সম্বন্ধে. প্রচুর ওভারহেড রয়েছে তবে আপনি $ সময়সীমা হারাতে পারেন। আমরা এটিও ধরে নিয়েছি যে নির্দেশকটি ব্যবহার করে এমন উপাদানটি নির্দেশের আগে তাত্ক্ষণিকভাবে পরিচালিত হয় কারণ যখন নির্দেশটি তাত্ক্ষণিকভাবে চালিত হয় তখন আমরা নিয়ন্ত্রণ পরিবর্তনশীলটির উপর নির্ভর করতে পারি।