javascript - অন্যান্য নিয়ামক থেকে নির্দেশক নিয়ামক কল পদ্ধতি




jquery angularjs (3)

আপনি অভিভাবকের সুযোগে নির্দেশকের নিয়ামকটি প্রকাশ করতে পারেন, যেমন ngForm name বৈশিষ্ট্য সহ: http://docs.angularjs.org/api/ng.directive:ngForm

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

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

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

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

তাই যখন popdown ডাইরেক্টিভ কন্ট্রোলার show হয় তখন লিঙ্ক ফাংশনটি ট্রিগার করা এবং একটি অ্যানিমেশন সম্পাদন করা উচিত। আমি কিভাবে যে অর্জন করতে পারে?


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

এখানে satchmorun এর সমাধান উপর ভিত্তি করে একটি বেত্রাঘাত। এটি PopdownAPI এর সাথে বিতরিত, এবং শীর্ষ স্তরের নিয়ামক পরিবর্তে স্কোপ শৃঙ্খলে $broadcast 'সাফল্য' এবং 'ত্রুটি' ইভেন্টগুলি $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();
});

এটি অন্তত, কাজ করে এবং আমাকে একটি সুন্দরভাবে decoupled সমাধান বলে মনে হয়। আমি অন্য কারও কারও কারও জন্য দুর্বল অনুশীলন বলে মনে করি।


এটি একটি মজার প্রশ্ন, এবং আমি ভাবতে শুরু করি কিভাবে আমি এইরকম কিছু বাস্তবায়ন করব।

আমি এই (fiddle) সঙ্গে এসেছিলেন;

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

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

আমি মডিউলটিতে দুটি জিনিস রেখেছি, API এর জন্য একটি factory যা যে কোনও স্থানে ইনজেকশন করা যেতে পারে এবং প্রকৃত পপডাউন উপাদানটির আচরণ নির্ধারণের 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;
        }
    }
});

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

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>

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

আবার, রেফারেন্স জন্য, বেহালা






angularjs-directive