অ্যাঙ্গুলারজেএস নির্দেশিকায় সংজ্ঞায়িত পদ্ধতিটিকে কীভাবে কল করবেন?

Question

আমার একটি নির্দেশ রয়েছে, এখানে কোডটি রয়েছে:

.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {

            var center = new google.maps.LatLng(50.1, 14.4); 
            $scope.map_options = {
                zoom: 14,
                center: center,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            // create map
            var map = new google.maps.Map(document.getElementById(attrs.id), $scope.map_options);
            var dirService= new google.maps.DirectionsService();
            var dirRenderer= new google.maps.DirectionsRenderer()

            var showDirections = function(dirResult, dirStatus) {
                if (dirStatus != google.maps.DirectionsStatus.OK) {
                    alert('Directions failed: ' + dirStatus);
                    return;
                  }
                  // Show directions
                dirRenderer.setMap(map);
                //$scope.dirRenderer.setPanel(Demo.dirContainer);
                dirRenderer.setDirections(dirResult);
            };

            // Watch
            var updateMap = function(){
                dirService.route($scope.dirRequest, showDirections); 
            };    
            $scope.$watch('dirRequest.origin', updateMap);

            google.maps.event.addListener(map, 'zoom_changed', function() {
                $scope.map_options.zoom = map.getZoom();
              });

            dirService.route($scope.dirRequest, showDirections);  
        }
    }
})

আমি updateMap()একটি ব্যবহারকারী পদক্ষেপে কল করতে চাই । অ্যাকশন বোতামটি নির্দেশে নেই।

updateMap()একটি নিয়ামক থেকে কল করার সেরা উপায় কি ?

Comments

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

— Noam

Answer 1

আপনি যদি বিচ্ছিন্ন স্কোপগুলি ব্যবহার করতে চান তবে আপনি =নিয়ামকের সুযোগ থেকে কোনও ভেরিয়েবলের দ্বি-দিকনির্দেশক বাঁধন ব্যবহার করে একটি নিয়ন্ত্রণ আইটেমটি পাস করতে পারেন । আপনি একই নিয়ন্ত্রকের একই পৃষ্ঠায় একই নির্দেশিকার বেশ কয়েকটি উদাহরণও নিয়ন্ত্রণ করতে পারেন।

angular.module('directiveControlDemo', [])

.controller('MainCtrl', function($scope) {
  $scope.focusinControl = {};
})

.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{internalControl}}</div>',
    scope: {
      control: '='
    },
    link: function(scope, element, attrs) {
      scope.internalControl = scope.control || {};
      scope.internalControl.takenTablets = 0;
      scope.internalControl.takeTablet = function() {
        scope.internalControl.takenTablets += 1;
      }
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="directiveControlDemo">
  <div ng-controller="MainCtrl">
    <button ng-click="focusinControl.takeTablet()">Call directive function</button>
    <p>
      <b>In controller scope:</b>
      {{focusinControl}}
    </p>
    <p>
      <b>In directive scope:</b>
      <focusin control="focusinControl"></focusin>
    </p>
    <p>
      <b>Without control object:</b>
      <focusin></focusin>
    </p>
  </div>
</div>

Comments

+1 এটি আমি কৌনিকতে আমার পুনরায় ব্যবহারযোগ্য উপাদানগুলির জন্য এপিআইগুলি তৈরি করি।

— রোমি

এটি গ্রহণযোগ্য উত্তরের চেয়ে পরিষ্কার এবং সিম্পসন রেফারেন্সের জন্য +1, যদি আমার ভুল হয় না

— ব্লেক মিলার

আমি কীভাবে একই সমস্যাটি সমাধান করেছি তা অত্যন্ত আনন্দের সাথে। এটি কাজ করে, তবে এটি হ্যাকের মতো দেখাচ্ছে ... আমি আশা করি কৌণিকটি এর জন্য আরও ভাল সমাধান করতে পারে।

— ডেমা

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

— বিএলসুলি

আপনার সম্ভবত scope.controlউপস্থিত রয়েছে কিনা তা নিশ্চিত করার জন্য আপনার একটি চেক করা উচিত , অন্যথায় অন্য যে জায়গাগুলি নির্দেশিকা ব্যবহার করে তবে নির্দেশকের পদ্ধতিগুলি অ্যাক্সেস করার প্রয়োজন নেই এবং controlundefined

— কোনও অ্যাটর নেই

Answer 2

অ্যাকশন বোতামটি $scopeনির্দেশকের মতো একই নিয়ামক ব্যবহার করে ধরে নিচ্ছে, কেবল লিঙ্ক ফাংশনের ভিতরে ফাংশনটি সংজ্ঞায়িত updateMapকরুন $scope। আপনার কন্ট্রোলার তখন অ্যাকশন বোতামটি ক্লিক করা হলে সেই ফাংশনটিকে কল করতে পারে।

<div ng-controller="MyCtrl">
    <map></map>
    <button ng-click="updateMap()">call updateMap()</button>
</div>

app.directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {
            $scope.updateMap = function() {
                alert('inside updateMap()');
            }
        }
    }
});

fiddle

---

@ ফ্লোরিয়ানএফের মন্তব্য অনুসারে, নির্দেশটি যদি বিচ্ছিন্ন সুযোগ ব্যবহার করে তবে বিষয়গুলি আরও জটিল। এটির কাজ করার জন্য এখানে একটি উপায়: নির্দেশকের set-fnসাথে একটি বৈশিষ্ট্য যুক্ত করুন mapযা নিয়ামকের সাথে নির্দেশক ফাংশনটি নিবন্ধ করবে:

<map set-fn="setDirectiveFn(theDirFn)"></map>
<button ng-click="directiveFn()">call directive function</button>

scope: { setFn: '&' },
link: function(scope, element, attrs) {
    scope.updateMap = function() {
       alert('inside updateMap()');
    }
    scope.setFn({theDirFn: scope.updateMap});
}

function MyCtrl($scope) {
    $scope.setDirectiveFn = function(directiveFn) {
        $scope.directiveFn = directiveFn;
    };
}

fiddle

Comments

যদি নির্দেশের একটি বিচ্ছিন্ন সুযোগ থাকে?

— ফ্লোরিয়ান এফ

ধন্যবাদ! (নির্দেশকের নিয়ামকের সংজ্ঞায়িত কোনও ফাংশন কল করা আরও সহজ হবে তবে আমি সে সম্পর্কে নিশ্চিত নই)

— ফ্লোরিয়ান এফ

আপনি যদি কোনও বিচ্ছিন্ন সুযোগ নিয়ে কাজ না করে থাকেন তবে এটি আরও ভাল উপায়।

— মার্টিন ফ্র্যাঙ্ক

এই উত্তরটি আসলে ওপি প্রশ্নের উত্তর দেয়। এটি বিচ্ছিন্ন সুযোগও ব্যবহার করে, বিচ্ছিন্ন সুযোগ পেতে আপনাকে কেবল scopeনির্দেশিক ঘোষণায় সম্পত্তি যুক্ত করতে হবে ।

— ড্যানিয়েল জি।

Answer 3

যদিও এটির সাথে যোগাযোগের সুবিধার্থে কোনও নির্দেশকের বিচ্ছিন্ন সুযোগে কোনও অবজেক্ট প্রকাশ করার জন্য এটি লোভনীয় হতে পারে তবে এটি করার ফলে বিভ্রান্তিকর "স্প্যাগেটি" কোড হতে পারে, বিশেষত যদি আপনাকে এই যোগাযোগটি কয়েক স্তরের মাধ্যমে পরিচালনা করা প্রয়োজন (নিয়ন্ত্রক, নির্দেশিকাতে, নেস্টেড নির্দেশিকা ইত্যাদি)

আমরা মূলত এই পথে নেমে গিয়েছিলাম তবে আরও কিছু গবেষণার পরে দেখা গেছে যে এটি আরও বোধগম্য হয়েছে এবং এর ফলে ইভেন্ট এবং বৈশিষ্ট্যগুলি প্রকাশের জন্য আরও রক্ষণাবেক্ষণযোগ্য এবং পাঠযোগ্য উভয় কোডের ফলস্বরূপ যে কোনও নির্দেশকের মাধ্যমে কোনও পরিষেবার মাধ্যমে যোগাযোগের জন্য ব্যবহার করা হবে using সেই পরিষেবাটির বৈশিষ্ট্যগুলিতে নজর রাখুন দিকনির্দেশক বা অন্য কোনও নিয়ন্ত্রণ যা যোগাযোগের জন্য এই পরিবর্তনগুলির প্রতিক্রিয়া জানাতে প্রয়োজন।

এই বিমূর্তনটি AngularJS এর ​​নির্ভরতা ইনজেকশন কাঠামোর সাথে খুব সুন্দরভাবে কাজ করে আপনি সেই ইভেন্টগুলিতে প্রতিক্রিয়া জানাতে প্রয়োজন এমন কোনও আইটেমটিতে পরিষেবাটি ইনজেক্ট করতে পারেন। আপনি যদি Angular.js ফাইলটি দেখুন, আপনি দেখতে পাবেন যে সেখানকার নির্দেশিকাগুলি পরিষেবাগুলিও ব্যবহার করে এবং এই পদ্ধতিতে দেখুন, তারা বিচ্ছিন্ন সুযোগে ঘটনাগুলি প্রকাশ করে না।

শেষ অবধি, একে অপরের উপর নির্ভরশীল যে নির্দেশাবলীর মধ্যে আপনার যোগাযোগের প্রয়োজন সেই ক্ষেত্রে, আমি যোগাযোগের মাধ্যম হিসাবে সেই নির্দেশাবলীর মধ্যে একটি নিয়ামককে ভাগ করে নেওয়ার পরামর্শ দেব।

অ্যাঙ্গুলারজেএস-এর সেরা অনুশীলনের উইকিও এটির উল্লেখ করেছে:

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

• $ সুযোগ। $ ঘড়ি () এর ইভেন্টগুলির প্রয়োজনটিকে প্রতিস্থাপন করা উচিত
• সরাসরি ইনজেকশন পরিষেবা এবং কলিং পদ্ধতিগুলি সরাসরি যোগাযোগের জন্যও কার্যকর is
• দিকনির্দেশক-নির্দেশক-নিয়ন্ত্রকগুলির মাধ্যমে একে অপরের সাথে সরাসরি যোগাযোগ করতে সক্ষম

Comments

আমি স্বজ্ঞাতভাবে দুটি সমাধানে পৌঁছেছি: (1) স্কোপ ভেরিয়েবলের পরিবর্তনটি দেখুন =, ভেরিয়েবলটিতে পদ্ধতির নাম এবং যুক্তি রয়েছে। (২) @টপিক আইডি হিসাবে একমুখী বাঁধাইয়ের স্ট্রিংটি প্রকাশ করুন এবং কলি এই বিষয়টিতে ইভেন্ট প্রেরণ করুন। এখন আমি সেরা অনুশীলন উইকি দেখেছি। আমি মনে করি এটি কোনওভাবে না করার কারণ রয়েছে। তবে আমি এখনও খুব পরিষ্কার নই, এটি কীভাবে কাজ করে। আমার ক্ষেত্রে, আমি একটি ট্যাবসেট নির্দেশিকা তৈরি করেছি, আমি একটি switchTab(tabIndex)পদ্ধতি প্রকাশ করতে চাই । আপনি আরও উদাহরণ দিতে পারেন?

— stanleyxu2005

আপনি কোনও switchTab(tabIndex)পদ্ধতি প্রকাশ করবেন না , আপনি কেবল একটি tabIndexচলককে আবদ্ধ করবেন । আপনার পৃষ্ঠা নিয়ামকের এমন ক্রিয়া থাকতে পারে যা সেই পরিবর্তনশীল পরিবর্তন করে। আপনি সেই পরিবর্তনশীলটিকে আপনার ট্যাব নির্দেশিকায় বাঁধাই / পাস করেন। আপনার ট্যাব নির্দেশিকাটি তারপরে পরিবর্তনের জন্য সেই পরিবর্তনশীলটি দেখতে পারে এবং তার নিজস্ব ইচ্ছার সুইচট্যাব সম্পাদন করতে পারে। কারণ নির্দেশটি স্থির করে যে কোনও ভেরিয়েবলের ভিত্তিতে এর ট্যাবগুলি কখন / কীভাবে নিয়ন্ত্রণ করতে হয়। এটি কোনও বাহ্যিক উত্সের কাজ নয়, অন্যথায় বাহ্যিক উত্সগুলির জন্য নির্দেশকের অভ্যন্তরীণ কার্যকারিতা সম্পর্কে জ্ঞান প্রয়োজন, যা খারাপ মাকের।

— সুমেরে

Answer 4

অলিভারের উত্তরের উপর ভিত্তি করে তৈরি করা - আপনাকে সম্ভবত কোনও নির্দেশকের অভ্যন্তরীণ পদ্ধতিগুলি অ্যাক্সেস করার প্রয়োজন হতে পারে না এবং এই ক্ষেত্রে আপনাকে সম্ভবত কোনও ফাঁকা বস্তু তৈরি করতে হবে না এবং controlকেবল কোনও ত্রুটি নিক্ষেপ থেকে রোধ করার জন্য নির্দেশিকায় একটি অ্যাট্রি যুক্ত করতে হবে না ( cannot set property 'takeTablet' of undefined)।

আপনি নির্দেশের মধ্যে অন্য জায়গাগুলিতেও পদ্ধতিটি ব্যবহার করতে চাইতে পারেন।

আমি scope.controlউপস্থিত রয়েছে কিনা তা নিশ্চিত করার জন্য আমি একটি চেক যুক্ত করব এবং এটি প্রকাশের মডিউল প্যাটার্নের সাথে একই পদ্ধতিতে পদ্ধতিগুলি সেট করব

app.directive('focusin', function factory() {
  return {
    restrict: 'E',
    replace: true,
    template: '<div>A:{{control}}</div>',
    scope: {
      control: '='
    },
    link : function (scope, element, attrs) {
      var takenTablets = 0;
      var takeTablet = function() {
        takenTablets += 1;  
      }

      if (scope.control) {
        scope.control = {
          takeTablet: takeTablet
        };
      }
    }
  };
});

Comments

নির্দেশের ভিতরে একটি প্রকাশক প্যাটার্ন ব্যবহার করে স্পট স্পট, উদ্দেশ্যগুলি আরও সুস্পষ্ট করে তোলে। সুন্দর!

— জেএসঞ্চো

Answer 5

সত্যি কথা বলতে কি, আমি এই থ্রেডের উত্তরগুলির সাথে সত্যই নিশ্চিত হইনি। সুতরাং, এখানে আমার সমাধানগুলি দেওয়া হল:

দিকনির্দেশক হ্যান্ডলার (পরিচালক) অ্যাপ্রোচ

এই পদ্ধতিটি নির্দেশিকাগুলি $scopeকোনও ভাগ করা বা বিচ্ছিন্ন কিনা তা নিয়ে অজ্ঞেয়

factoryনির্দেশিক দৃষ্টান্তগুলি নিবন্ধ করার জন্য ক

angular.module('myModule').factory('MyDirectiveHandler', function() {
    var instance_map = {};
    var service = {
        registerDirective: registerDirective,
        getDirective: getDirective,
        deregisterDirective: deregisterDirective
    };

    return service;

    function registerDirective(name, ctrl) {
        instance_map[name] = ctrl;
    }

    function getDirective(name) {
        return instance_map[name];
    }

    function deregisterDirective(name) {
        instance_map[name] = null;
    }
});

ডাইরেক্টিভ কোড, আমি সাধারণত সমস্ত যুক্তি যুক্ত করি যেগুলি ডায়োমটিভ কন্ট্রোলারের অভ্যন্তরে ডোমের সাথে ডিল করে না। এবং আমাদের হ্যান্ডলারের ভিতরে নিয়ামক উদাহরণটি নিবন্ধভুক্ত করা হচ্ছে

angular.module('myModule').directive('myDirective', function(MyDirectiveHandler) {
    var directive = {
        link: link,
        controller: controller
    };

    return directive;

    function link() {
        //link fn code
    }

    function controller($scope, $attrs) {
        var name = $attrs.name;

        this.updateMap = function() {
            //some code
        };

        MyDirectiveHandler.registerDirective(name, this);

        $scope.$on('destroy', function() {
            MyDirectiveHandler.deregisterDirective(name);
        });
    }
})

টেমপ্লেট কোড

<div my-directive name="foo"></div>

factory& প্রকাশ্যে উন্মুক্ত পদ্ধতি ব্যবহার করে নিয়ামক দৃষ্টান্ত অ্যাক্সেস করুন

angular.module('myModule').controller('MyController', function(MyDirectiveHandler, $scope) {
    $scope.someFn = function() {
        MyDirectiveHandler.get('foo').updateMap();
    };
});

কৌণিকের পদ্ধতি

তারা কীভাবে কাজ করে সে সম্পর্কে কৌনিক বইয়ের একটি পাতা বের করা

<form name="my_form"></form>

ব্যবহার $ পার্স এবং এর নিয়ামক নিবন্ধনের $parentসুযোগ। এই কৌশল বিচ্ছিন্ন $scopeনির্দেশাবলীতে কাজ করে না ।

angular.module('myModule').directive('myDirective', function($parse) {
    var directive = {
        link: link,
        controller: controller,
        scope: true
    };

    return directive;

    function link() {
        //link fn code
    }

    function controller($scope, $attrs) {
        $parse($attrs.name).assign($scope.$parent, this);

        this.updateMap = function() {
            //some code
        };
    }
})

এটি ব্যবহার করে নিয়ন্ত্রণকারীর ভিতরে এটি অ্যাক্সেস করুন $scope.foo

angular.module('myModule').controller('MyController', function($scope) {
    $scope.someFn = function() {
        $scope.foo.updateMap();
    };
});

Comments

"কৌণিকের দৃষ্টিভঙ্গি" দুর্দান্ত দেখাচ্ছে! যদিও একটি টাইপো রয়েছে: $scope.fooহওয়া উচিত$scope.my_form

— ড্যানিয়েল ডি

নাহ, এটি $scope.fooযেহেতু আমাদের টেম্পলেট <div my-directive name="foo"></div>এবং nameবৈশিষ্ট্যের মান 'ফু' oo <formকৌণিক নির্দেশের একটি উদাহরণ যা এই কৌশলটি নিযুক্ত করে

— মুদাসসির আলী

Answer 6

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

//Create module
var MapModule = angular.module('MapModule', []);

//Load dependency dynamically
angular.module('app').requires.push('MapModule');

নির্দেশের সাথে যোগাযোগের জন্য একটি API তৈরি করুন। AddUpdateEvent ইভেন্টের অ্যারেতে একটি ইভেন্ট যোগ করে এবং আপডেটম্যাপ প্রতিটি ইভেন্ট ফাংশনকে কল করে।

MapModule.factory('MapApi', function () {
    return {
        events: [],

        addUpdateEvent: function (func) {
            this.events.push(func);
        },

        updateMap: function () {
            this.events.forEach(function (func) {
                func.call();
            });
        }
    }
});

(সম্ভবত ইভেন্টটি সরাতে আপনাকে কার্যকারিতা যুক্ত করতে হবে))

নির্দেশে ম্যাপাপি-তে একটি রেফারেন্স সেট করুন এবং ম্যাপপিপি.আপডেটম্যাপ কল করা হলে ইভেন্ট হিসাবে $ স্কোপ.আপডেটম্যাপ যুক্ত করুন।

app.directive('map', function () {
    return {
        restrict: 'E', 
        scope: {}, 
        templateUrl: '....',
        controller: function ($scope, $http, $attrs, MapApi) {

            $scope.api = MapApi;

            $scope.updateMap = function () {
                //Update the map 
            };

            //Add event
            $scope.api.addUpdateEvent($scope.updateMap);

        }
    }
});

"প্রধান" নিয়ামকটিতে মানচিত্রটি মানচিত্রে একটি উল্লেখ যুক্ত করুন এবং মানচিত্রটি আপডেট করতে কেবল ম্যাপএপি.আপডেটম্যাপ () কল করুন।

app.controller('mainController', function ($scope, MapApi) {

    $scope.updateMapButtonClick = function() {
        MapApi.updateMap();    
    };
}

Comments

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

— smajl

Answer 7

আপনি একটি DOM বৈশিষ্ট্য নির্দিষ্ট করতে পারেন যা অভিভাবকের স্কোপে কোনও ক্রিয়া সংজ্ঞায়িত করার নির্দেশকে অনুমতি দেওয়ার জন্য ব্যবহার করা যেতে পারে। প্যারেন্ট স্কোপটি অন্য যেকোনো সময়ের মতো এই পদ্ধতিতে কল করতে পারে। এখানে একজন নিমগ্ন। এবং নীচে সম্পর্কিত কোড আছে।

clearfn নির্দেশক উপাদানটির এমন একটি বৈশিষ্ট্য যাতে অভিভাবকরা স্কোপ সম্পত্তিটি পাস করতে পারে যা নির্দেশটি তার পরে পছন্দসই আচরণটি সম্পাদন করে এমন কোনও ফাংশনে সেট করতে পারে।

<!DOCTYPE html>
<html ng-app="myapp">
  <head>
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <style>
      my-box{
        display:block;
        border:solid 1px #aaa;
        min-width:50px;
        min-height:50px;
        padding:.5em;
        margin:1em;
        outline:0px;
        box-shadow:inset 0px 0px .4em #aaa;
      }
    </style>
  </head>
  <body ng-controller="mycontroller">
    <h1>Call method on directive</h1>
    <button ng-click="clear()">Clear</button>
    <my-box clearfn="clear" contentEditable=true></my-box>
    <script>
      var app = angular.module('myapp', []);
      app.controller('mycontroller', function($scope){
      });
      app.directive('myBox', function(){
        return {
          restrict: 'E',
          scope: {
            clearFn: '=clearfn'
          },
          template: '',
          link: function(scope, element, attrs){
            element.html('Hello World!');
            scope.clearFn = function(){
              element.html('');
            };
          }
        }
      });
    </script>
  </body>
</html>

Comments

আমি বুঝতে পারছি না কেন এটি কাজ করে .. কারণ এটি স্পষ্ট বৈশিষ্ট্যটি স্কোপের মধ্যে রয়েছে কীভাবে?

— কুইন উইলসন

আপনি এটি ঘোষণা করার সাথে সাথে এটি নির্দেশকের স্কোপের একটি অংশে পরিণত হয় (উদাঃ scope: { clearFn: '=clearfn' })।

— ট্রেভর

Answer 8

কেবল স্কোপ ব্যবহার করুন $ নির্দেশক ফাংশনে ডাকা ফাংশন সংযুক্ত করতে পিতামাতার

angular.module('myApp', [])
.controller('MyCtrl',['$scope',function($scope) {

}])
.directive('mydirective',function(){
 function link(scope, el, attr){
   //use scope.$parent to associate the function called to directive function
   scope.$parent.myfunction = function directivefunction(parameter){
     //do something
}
}
return {
        link: link,
        restrict: 'E'   
      };
});

এইচটিএমএলে

<div ng-controller="MyCtrl">
    <mydirective></mydirective>
    <button ng-click="myfunction(parameter)">call()</button>
</div>

Answer 9

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

angular.module("app", [])
  .directive("palyer", [
    function() {
      return {
        restrict: "A",
        template:'<div class="player"><span ng-bind="text"></span></div>',
        link: function($scope, element, attr) {
          if (attr.toPlay) {
            $scope[attr.toPlay] = function(name) {
              $scope.text = name + " playing...";
            }
          }
        }
      };
    }
  ])
  .controller("playerController", ["$scope",
    function($scope) {
      $scope.clickPlay = function() {
        $scope.play('AR Song');
      };
    }
  ]);

.player{
  border:1px solid;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="playerController">
    <p>Click play button to play
      <p>
        <p palyer="" to-play="play"></p>
        <button ng-click="clickPlay()">Play</button>

  </div>
</div>

Answer 10

পরীক্ষিত আশা করি এটি কাউকে সহায়তা করে।

আমার সহজ পদ্ধতির (ট্যাগগুলি আপনার মূল কোড হিসাবে ভাবেন)

<html>
<div ng-click="myfuncion"> 
<my-dir callfunction="myfunction">
</html>

<directive "my-dir">
callfunction:"=callfunction"
link : function(scope,element,attr) {
scope.callfunction = function() {
 /// your code
}
}
</directive>

Answer 11

হতে পারে এটি সেরা পছন্দ নয় তবে আপনি যা করতে পারেন angular.element("#element").isolateScope()বা $("#element").isolateScope()সুযোগ এবং / অথবা আপনার নির্দেশকের নিয়ামক অ্যাক্সেস করতে পারেন ।

Answer 12

পৃষ্ঠা নিয়ামকটিতে কীভাবে নির্দেশকের নিয়ামক পাবেন:

1. DOM উপাদান থেকে নির্দেশক নিয়ামকের রেফারেন্স পেতে একটি কাস্টম নির্দেশিকা লিখুন:

   angular.module('myApp')
       .directive('controller', controller);
   
   controller.$inject = ['$parse'];
   
   function controller($parse) {
       var directive = {
           restrict: 'A',
           link: linkFunction
       };
       return directive;
   
       function linkFunction(scope, el, attrs) {
           var directiveName = attrs.$normalize(el.prop("tagName").toLowerCase());
           var directiveController = el.controller(directiveName);
   
           var model = $parse(attrs.controller);
           model.assign(scope, directiveController);
       }
   }

2. পৃষ্ঠা নিয়ামকের এইচটিএমএল এ এটি ব্যবহার করুন:

   <my-directive controller="vm.myDirectiveController"></my-directive>

3. পৃষ্ঠা নিয়ামকটিতে নির্দেশিকা নিয়ামক ব্যবহার করুন:

   vm.myDirectiveController.callSomeMethod();

দ্রষ্টব্য: প্রদত্ত সমাধানটি কেবলমাত্র উপাদান নির্দেশকের নিয়ন্ত্রণকারীদের জন্য কাজ করে (ট্যাগ নামটি চেয়েছিলেন নির্দেশের নাম পেতে ব্যবহৃত হয়)।

Answer 13

নীচের সমাধানটি কার্যকর হবে যখন আপনার 'নিয়ামক হিসাবে' বিন্যাসে নিয়ামক (পিতা-মাতা এবং নির্দেশিকা (বিচ্ছিন্ন) উভয়ই থাকবেন

কেউ এই দরকারী খুঁজে পেতে পারে,

নির্দেশনা:

var directive = {
        link: link,
        restrict: 'E',
        replace: true,
        scope: {
            clearFilters: '='
        },
        templateUrl: "/temp.html",
        bindToController: true, 
        controller: ProjectCustomAttributesController,
        controllerAs: 'vmd'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.vmd.clearFilters = scope.vmd.SetFitlersToDefaultValue;
    }
}

নির্দেশক নিয়ামক:

function DirectiveController($location, dbConnection, uiUtility) {
  vmd.SetFitlersToDefaultValue = SetFitlersToDefaultValue;

function SetFitlersToDefaultValue() {
           //your logic
        }
}

এইচটিএমএল কোড:

      <Test-directive clear-filters="vm.ClearFilters"></Test-directive>
    <a class="pull-right" style="cursor: pointer" ng-click="vm.ClearFilters()"><u>Clear</u></a> 
//this button is from parent controller which will call directive controller function