আমি কীভাবে একটি Angular.js বৈশিষ্ট্য নির্দেশকে একাধিক বৈশিষ্ট্য পাস করব?

Question

আমার নীচে নিম্নরূপে একটি অ্যাট্রিবিউট ডিরেক্টরি নিষিদ্ধ রয়েছে:

 restrict: "A"

আমার দুটি বৈশিষ্ট্যে পাস করতে হবে; একটি নম্বর এবং একটি ফাংশন / কলব্যাক, attrsঅবজেক্টটি ব্যবহার করে নির্দেশের মধ্যে সেগুলি অ্যাক্সেস করে ।

যদি নির্দেশটি কোনও উপাদান নির্দেশ ছিল তবে "E"আমি এর সাথে সীমাবদ্ধ রাখতে পারলাম:

<example-directive example-number="99" example-function="exampleCallback()">

যাইহোক, কারণগুলির জন্য আমি .ুকব না আমার একটি গুণাবলীর নির্দেশিকা হওয়ার দিকনির্দেশক প্রয়োজন।

আমি কীভাবে একাধিক বৈশিষ্ট্যকে কোনও অ্যাট্রিবিউট ডিরেক্টরিতে পাস করব?

Comments

এটি আপনার নির্দেশিকা যে ধরণের সুযোগ তৈরি করে তার উপর নির্ভর করে (যদি থাকে)। পছন্দগুলি হ'ল: কোনও নতুন সুযোগ নেই (ডিফল্ট, বা এর সাথে স্পষ্ট scope: false), নতুন সুযোগ (সাধারণ প্রোটোটাইপাল উত্তরাধিকার সহ, অর্থাত্ scope: true), এবং বিচ্ছিন্ন সুযোগ (অর্থাত্ scope: { ... })। আপনার নির্দেশিকাটি কী ধরণের সুযোগ তৈরি করে?

— মার্ক রাজকক

@ মারকরাজাকক এর একটি বিচ্ছিন্ন সুযোগ রয়েছে।

— আনডিস্ট্রাকশন

Answer 1

নির্দেশটি একই উপাদানটিতে সংজ্ঞায়িত যে কোনও বৈশিষ্ট্য অ্যাক্সেস করতে পারে, এমনকি নির্দেশ নিজেই উপাদান না হলেও।

টেমপ্লেট:

<div example-directive example-number="99" example-function="exampleCallback()"></div>

নির্দেশিকা:

app.directive('exampleDirective ', function () {
    return {
        restrict: 'A',   // 'A' is the default, so you could remove this line
        scope: {
            callback : '&exampleFunction',
        },
        link: function (scope, element, attrs) {
            var num = scope.$eval(attrs.exampleNumber);
            console.log('number=',num);
            scope.callback();  // calls exampleCallback()
        }
    };
});

fiddle

যদি বৈশিষ্ট্যের মানটি example-numberহার্ড-কোডড হয় তবে আমি $evalএকবার ব্যবহার করার এবং মানটি সংরক্ষণ করার পরামর্শ দিচ্ছি । চলকটির numসঠিক প্রকার (একটি সংখ্যা) থাকবে।

Comments

আমি সর্প-কেস ব্যবহার করতে উদাহরণ এইচটিএমএল সম্পাদনা করেছি। আমি জানি আমি এটি উপাদান হিসাবে ব্যবহার করতে পারি না। এটাই প্রশ্নটির মূল বিষয়।

— আনডিস্ট্রাকশন

@ পেডার, হ্যাঁ, দুঃখিত আমি উপাদানটির ব্যবহার সম্পর্কে খুব দ্রুত পড়ি। আমি উত্তরটি আপডেট করেছিলাম, এটি উল্লেখ করে যে আপনাকেও বৈশিষ্ট্যের জন্য সাপ-কেস ব্যবহার করতে হবে need

— মার্ক রাজকক

সমস্যা নেই. আপনার উত্তরের জন্য ধন্যবাদ. আমি সাপের কেস ব্যবহার করতে বৈশিষ্ট্যের নামগুলি সম্পাদনা করেছি। আপনি ঠিকঠাক যদি আমি আপনার উত্তরটি থেকে সরিয়ে ফেলি কারণ এটি আমার দ্বারা কেবল একটি নির্বোধ ত্রুটি ছিল এবং প্রকৃত প্রশ্নোত্তরের দিক থেকে বিক্ষিপ্ত হয়?

— আনডিস্ট্রাকশন

আমি এটি পাই না - নির্দেশিকা ব্যবহারের ("উদাহরণস্বরূপ কলব্যাক ()") এর ক্ষেত্রের ক্ষেত্রে উল্লিখিত একই জিনিসটির নামকরণ করতে নির্দেশিকা কীভাবে জানতে পারে? ("কলব্যাক: '& উদাহরণস্বরূপ কলব্যাক') সুযোগটি" কলব্যাক: "এবং উদাহরণ ফাংশন" হওয়া উচিত নয়?

— ব্লাস্টার

@FredrikL, একই উপাদান একাধিক নির্দেশনা জন্য, দয়া করে দেখুন stackoverflow.com/a/28735005/215945

— মার্ক Rajcok

Answer 2

আপনি কোনও এলিমেন্টের নির্দেশনার সাথে ঠিক তেমনভাবে করেন। আপনার এটিকে অ্যাটর্স অবজেক্টে রাখতে হবে, আমার নমুনাটিতে তাদের বিচ্ছিন্ন সুযোগের দ্বি-মুখী বাধ্যবাধকতা রয়েছে তবে এটির প্রয়োজন নেই। যদি আপনি কোনও বিচ্ছিন্ন সুযোগ ব্যবহার করেন তবে আপনি বৈশিষ্ট্যগুলি scope.$eval(attrs.sample)বা কেবল স্কোপ.সাম্পলের সাথে অ্যাক্সেস করতে পারেন তবে সেগুলি আপনার পরিস্থিতির উপর নির্ভর করে সংযোগ স্থাপনের ক্ষেত্রে সংজ্ঞায়িত করা যেতে পারে না।

app.directive('sample', function () {
    return {
        restrict: 'A',
        scope: {
            'sample' : '=',
            'another' : '='
        },
        link: function (scope, element, attrs) {
            console.log(attrs);
            scope.$watch('sample', function (newVal) {
                console.log('sample', newVal);
            });
            scope.$watch('another', function (newVal) {
                console.log('another', newVal);
            });
        }
    };
});

হিসাবে ব্যবহার:

<input type="text" ng-model="name" placeholder="Enter a name here">
<input type="text" ng-model="something" placeholder="Enter something here">
<div sample="name" another="something"></div>

Answer 3

আপনি কোনও বিষয়টিকে অ্যাট্রিবিউট হিসাবে পাস করতে পারেন এবং এটির মতো নির্দেশিকায় এটি পড়তে পারেন:

<div my-directive="{id:123,name:'teo',salary:1000,color:red}"></div>

app.directive('myDirective', function () {
    return {            
        link: function (scope, element, attrs) {
           //convert the attributes to object and get its properties
           var attributes = scope.$eval(attrs.myDirective);       
           console.log('id:'+attributes.id);
           console.log('id:'+attributes.name);
        }
    };
});

Comments

কোনও বস্তু ব্যবহার করে বুলিয়ান মান পাঠানো কি সম্ভব? আমি চেষ্টা করেছি {{true}}কিন্তু এটি এখনও স্ট্রিংয়ের মান দেয় true।

— পিটার Boomsma

Answer 4

এটি আমার পক্ষে কাজ করেছে এবং আমি আরও HTML5 অনুগত বলে মনে করি। 'ডেটা' উপসর্গটি ব্যবহার করতে আপনার এইচটিএমএল পরিবর্তন করা উচিত

<div data-example-directive data-number="99"></div>

এবং নির্দেশের মধ্যে ভেরিয়েবলের মান পড়ুন:

scope: {
        number : "=",
        ....
    },

Answer 5

যদি আপনার অন্য নির্দেশকের "উদাহরণস্বরূপ" নির্দেশিকা প্রয়োজন হয় + আপনার যুক্তিটি 'উদাহরণডাইরেক্টিভ'-এর' নিয়ামক ((উদাহরণস্বরূপ 'সিআরটিএল' বলি) থাকে):

app.directive('exampleDirective', function () {
    return {
        restrict: 'A',
        scope: false,
        bindToController: {
            myCallback: '&exampleFunction'
        },
        controller: 'exampleCtrl',
        controllerAs: 'vm'
    };
});
app.controller('exampleCtrl', function () {
    var vm = this;
    vm.myCallback();
});