অন্যান্য নিয়ামক থেকে নির্দেশিকা নিয়ন্ত্রণকারী কল পদ্ধতি method

Question

আমার একটি নির্দেশিকা রয়েছে যার নিজস্ব কন্ট্রোলার রয়েছে। নীচের কোডটি দেখুন:

var popdown = angular.module('xModules',[]);

popdown.directive('popdown', function () {
    var PopdownController = function ($scope) {
        this.scope = $scope;
    }

    PopdownController.prototype = {
        show:function (message, type) {
            this.scope.message = message;
            this.scope.type = type;
        },

        hide:function () {
            this.scope.message = '';
            this.scope.type = '';
        }
    }

    var linkFn = function (scope, lElement, attrs, controller) {

    };

    return {
        controller: PopdownController,
        link: linkFn,
        replace: true,
        templateUrl: './partials/modules/popdown.html'
    }

});

এটি ত্রুটি / বিজ্ঞপ্তি / সতর্কতাগুলির জন্য একটি বিজ্ঞপ্তি সিস্টেম হিসাবে বোঝানো হয়েছে। আমি যা করতে চাই তা অন্য নিয়ামকের কাছ থেকে (কোনও নির্দেশিকা নয়) showএই কন্ট্রোলারে ফাংশনটি কল করা । এবং যখন আমি এটি করি, আমি আমার লিঙ্ক ফাংশনটিও সনাক্ত করতে চাই যা কিছু বৈশিষ্ট্য পরিবর্তিত হয়েছে এবং কিছু অ্যানিমেশন সম্পাদন করে।

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

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

app.controller('IndexController', function($scope, RestService) {
    var result = RestService.query();

    if(result.error) {
        popdown.notify(error.message, 'error');
    }
});

সুতরাং নির্দেশিকা নিয়ন্ত্রণকারীকে কল showকরার সময় popdown, লিঙ্ক ফাংশনটিও ট্রিগার করা উচিত এবং একটি অ্যানিমেশন করা উচিত। আমি কীভাবে এটি অর্জন করতে পারি?

Comments

আপনি popdownপৃষ্ঠাটিতে নির্দেশিকাটিতে কলটি কোথায় রাখছেন - এটি ঠিক এমন এক জায়গায় যেখানে অন্যান্য নিয়ামকগণের সবার অ্যাক্সেস রয়েছে বলে মনে হয়, বা বিভিন্ন জায়গায় বেশ কয়েকটি পপডাউন রয়েছে?

— সাতমুরুন

আমার সূচকটি এইচটিএমএলটিতে রয়েছে: <div ng-view> </div> <div popdown> </div> মূলত বিশ্বব্যাপী উপলব্ধ হওয়ার জন্য এটির জন্য কেবল 1 পপডাউন উদাহরণ রয়েছে।

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

আমি মনে করি আপনি popdown.show(...)পরিবর্তে লিখতে চেয়েছিলেন popdown.notify(...)এটা ঠিক? অন্যথায় বিজ্ঞপ্তি ফাংশনটি বিভ্রান্তিকর।

— ল্যানোক্সিক্স

এটা কোথা থেকে আসে popdown.notify? .notifiyপদ্ধতি, মানে

— সবুজ

Answer 1

এটি একটি আকর্ষণীয় প্রশ্ন এবং আমি কীভাবে এরকম কিছু বাস্তবায়ন করব তা নিয়ে ভাবতে শুরু করি।

আমি এই (ফিজল) নিয়ে এসেছি ;

মূলত, একটি নিয়ামকের কাছ থেকে কোনও নির্দেশিকা কল করার পরিবর্তে, সমস্ত পপডাউন যুক্তি রাখার জন্য আমি একটি মডিউল তৈরি করেছি:

var PopdownModule = angular.module('Popdown', []);

আমি মডিউলে দুটি জিনিস রেখেছি, একটি factoryএমন API এর জন্য যা যে কোনও জায়গায় ইনজেকশনের ব্যবস্থা করা যায় এবং directiveপ্রকৃত পপডাউন উপাদানটির আচরণ সংজ্ঞায়নের জন্য:

কারখানাটি কেবল কয়েকটি ফাংশন সংজ্ঞায়িত করে successএবং errorকয়েকটি ভেরিয়েবলের উপর নজর রাখে:

PopdownModule.factory('PopdownAPI', function() {
    return {
        status: null,
        message: null,
        success: function(msg) {
            this.status = 'success';
            this.message = msg;
        },
        error: function(msg) {
            this.status = 'error';
            this.message = msg;
        },
        clear: function() {
            this.status = null;
            this.message = null;
        }
    }
});

নির্দেশটি এপিআইটিকে তার নিয়ামকটিতে ইনজেকশন দেয় এবং পরিবর্তনের জন্য এপিআই দেখায় (আমি সুবিধার জন্য বুটস্ট্র্যাপ সিএসএস ব্যবহার করছি):

PopdownModule.directive('popdown', function() {
    return {
        restrict: 'E',
        scope: {},
        replace: true,
        controller: function($scope, PopdownAPI) {
            $scope.show = false;
            $scope.api = PopdownAPI;

            $scope.$watch('api.status', toggledisplay)
            $scope.$watch('api.message', toggledisplay)

            $scope.hide = function() {
                $scope.show = false;
                $scope.api.clear();
            };

            function toggledisplay() {
                $scope.show = !!($scope.api.status && $scope.api.message);               
            }
        },
        template: '<div class="alert alert-{{api.status}}" ng-show="show">' +
                  '  <button type="button" class="close" ng-click="hide()">&times;</button>' +
                  '  {{api.message}}' +
                  '</div>'
    }
})

তারপরে আমি একটি appমডিউল নির্ধারণ করি যা এর উপর নির্ভর করে Popdown:

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

app.controller('main', function($scope, PopdownAPI) {
    $scope.success = function(msg) { PopdownAPI.success(msg); }
    $scope.error   = function(msg) { PopdownAPI.error(msg); }
});

এবং এইচটিএমএল দেখে মনে হচ্ছে:

<html ng-app="app">
    <body ng-controller="main">
        <popdown></popdown>
        <a class="btn" ng-click="success('I am a success!')">Succeed</a>
        <a class="btn" ng-click="error('Alas, I am a failure!')">Fail</a>
    </body>
</html>

আমি এটি পুরোপুরি আদর্শ কিনা নিশ্চিত না তবে এটি বিশ্বব্যাপী পপডাউন নির্দেশিকার সাথে যোগাযোগ স্থাপনের একটি যুক্তিসঙ্গত উপায় বলে মনে হয়েছিল।

আবার, রেফারেন্সের জন্য, হুড়োহুড়ি ।

Comments

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

— জোশ ডেভিড মিলার

সত্যিই ব্যতিক্রমী উত্তর! JQuery এবং ব্যাকবোন থেকে আসা আমাদের তাদের জন্য যেমন একটি দরকারী উদাহরণ

— ব্র্যান্ডন

এই দৃষ্টিতে একাধিক নির্দেশকে একই দৃষ্টিতে ইনস্ট্যান্ট করতে এই মডিউলটি ব্যবহার করা কি সম্ভব? এই নির্দেশের কোনও নির্দিষ্ট উদাহরণের সাফল্য বা ত্রুটি ফাংশনটিকে আমি কীভাবে বলতে পারি?

— ইরা

@ আইরা আপনি সম্ভবত স্থিতি এবং বার্তা অবজেক্টের একটি মানচিত্র (বা তালিকা) রাখতে কারখানাটি পরিবর্তন করতে পারেন এবং তারপরে আপনার প্রয়োজনীয় তালিকার কোন আইটেমটি সনাক্ত করতে নির্দেশের উপর একটি নাম গুণাবলী ব্যবহার করতে পারেন। সুতরাং success(msg)এইচটিএমএলে কল sucess(name, msg)করার পরিবর্তে আপনি সঠিক নামের সাথে নির্দেশিকাটি নির্বাচন করতে কল করবেন।

— ল্যানোক্সিক্স

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

— পল টেলর

Answer 2

আপনি পপডাউন ট্রিগার করতে ইভেন্টগুলিও ব্যবহার করতে পারেন।

এখানে স্যাচমোরুনের সমাধানের উপর ভিত্তি করে একটি ফিডল রয়েছে । এটি পপডাউনএপিআইয়ের সাথে বিতরণ করে এবং শীর্ষ স্তরের নিয়ামক $broadcastস্কোপ চেইনের পরিবর্তে 'সাফল্য' এবং 'ত্রুটি' ইভেন্টগুলির দ্বারা:

$scope.success = function(msg) { $scope.$broadcast('success', msg); };
$scope.error   = function(msg) { $scope.$broadcast('error', msg); };

পপডাউন মডিউল তারপরে এই ইভেন্টগুলির জন্য হ্যান্ডলার ফাংশনগুলি নিবন্ধিত করে, যেমন:

$scope.$on('success', function(event, msg) {
    $scope.status = 'success';
    $scope.message = msg;
    $scope.toggleDisplay();
});

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

Comments

একটি অপূর্ণতা যা আমি ভাবতে পারি তা হ'ল নির্বাচিত উত্তরে আপনার কেবল পপডাউনপিআই (ডিআই সহ সহজেই উপলব্ধ) দরকার। এইটিতে আপনার বার্তাটি সম্প্রচারের জন্য নিয়ামকের সুযোগের অ্যাক্সেস দরকার need যাইহোক, এটি খুব সংক্ষিপ্ত দেখাচ্ছে।

— জুলিয়ান

আমি সাধারণ ব্যবহারের ক্ষেত্রে পরিষেবা-পদ্ধতির চেয়ে এটি আরও ভাল পছন্দ করি কারণ এটি জটিলতাটি কম রাখে এবং এখনও আলগাভাবে মিলিত হয়

— প্যাট্রিক ফ্যাভ্রে

Answer 3

এছাড়াও আপনি, পিতা বা মাতা সুযোগ ডিরেক্টিভের এর নিয়ামক প্রভাবাধীন পারে মত ngFormসঙ্গে nameঅ্যাট্রিবিউট আছে: http://docs.angularjs.org/api/ng.directive:ngForm

এখানে আপনি কীভাবে এটি অর্জন করা যেতে পারে তার একটি খুব প্রাথমিক উদাহরণ খুঁজে পেতে পারেন http://plnkr.co/edit/Ps8OXrfpnePFvvdFgYJf?p=preview

এই উদাহরণে আমার কাছে পদ্ধতির myDirectiveসাথে ডেডিকেটেড কন্ট্রোলার রয়েছে $clear(নির্দেশের জন্য খুব সাধারণ পাবলিক এপিআই সাজানো)। আমি এই নিয়ামকটিকে পিতামাতার স্কোপে প্রকাশ করতে পারি এবং নির্দেশের বাইরে এই পদ্ধতিটি কল করতে পারি।

Comments

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

— fasfsfgs 4

আমি স্কচমরুন দ্বারা প্রদত্ত একটি উদাহরণ অনুসরণ করার চেষ্টা করছি। আমি রানটাইমে কিছু এইচটিএমএল তৈরি করছি, তবে আমি নির্দেশকের টেম্পলেট ব্যবহার করছি না। আমি যুক্ত এইচটিএমএল থেকে কল করার জন্য কোনও ফাংশন নির্দিষ্ট করতে ডিরেক্টরের নিয়ামক ব্যবহার করছি তবে ফাংশনটি কল হচ্ছে না। মূলত, আমার এই নির্দেশনা রয়েছে: ডিরেক্টরেটিভ.ডাইরেক্টিভ ('abcXyz', ফাংশন ($ সংকলন {রিটার্ন {সীমাবদ্ধ: 'এই', প্রয়োজন: 'এনজিমোডেল', কন্ট্রোলার: ফাংশন ($ সুযোগ) $ $ স্কোপ.ফंक्शन ১ = ফাংশন () {..};} আমার এইচটিএমএল is: "<a href="" ng-click="function1('itemtype')">

— মার্ক

এটিই একমাত্র মার্জিত সমাধান যা নির্দেশিকা এপিআই প্রকাশ করতে পারে যদি নির্দেশনাটি সিঙ্গলটন না হয়! আমি এখনও ব্যবহার পছন্দ করি না $scope.$parent[alias]কারণ এটি আমার কাছে অভ্যন্তরীণ কৌণিক এপি ব্যবহার করার মতো গন্ধযুক্ত। তবে এখনও নন-সিঙ্গলটন নির্দেশের জন্য আরও মার্জিত সমাধান খুঁজে পাচ্ছে না। অন্যান্য রূপগুলি যেমন সম্প্রচারের ইভেন্টগুলি বা নির্দেশক এপিআই-এর জন্য প্যারেন্ট কন্ট্রোলারে খালি বস্তু সংজ্ঞায়িত করে তার থেকেও বেশি গন্ধ পাওয়া যায়।

— রুসলান স্টেলমাচেনকো

Answer 4

আমি আরও ভাল সমাধান পেয়েছি।

এখানে আমার নির্দেশিকাটি, আমি নির্দেশে অবজেক্ট রেফারেন্সটিতে ইনজেকশন দিয়েছি এবং নির্দেশক কোডে অনুরোধ ফাংশন যোগ করে এটি প্রসারিত করেছি।

app.directive('myDirective', function () {
    return {
        restrict: 'E',
        scope: {
        /*The object that passed from the cntroller*/
        objectToInject: '=',
        },
        templateUrl: 'templates/myTemplate.html',

        link: function ($scope, element, attrs) {
            /*This method will be called whet the 'objectToInject' value is changes*/
            $scope.$watch('objectToInject', function (value) {
                /*Checking if the given value is not undefined*/
                if(value){
                $scope.Obj = value;
                    /*Injecting the Method*/
                    $scope.Obj.invoke = function(){
                        //Do something
                    }
                }    
            });
        }
    };
});

একটি প্যারামিটার দিয়ে এইচটিএমএলে নির্দেশিকা ঘোষণা:

<my-directive object-to-inject="injectedObject"></ my-directive>

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

app.controller("myController", ['$scope', function ($scope) {
   // object must be empty initialize,so it can be appended
    $scope.injectedObject = {};

    // now i can directly calling invoke function from here 
     $scope.injectedObject.invoke();
}];

Comments

এটি মূলত উদ্বেগের নীতিগুলি পৃথক করার বিরুদ্ধে। আপনি নিয়ামককে নিয়ামকের কাছে ইনস্ট্যান্ট করা নির্দেশকে সরবরাহ করেন এবং আপনি সেই বস্তুর পরিচালনার দায়িত্বটি (অর্থাত্‍ দাওয়াত ফাংশনটি তৈরি করা) নির্দেশকে প্রেরণ করেন। আমার মতে, এর চেয়ে ভাল সমাধান নয়।

— ফ্লোরিন ভিসটিগ