একটি AngularJS নিয়ামক অন্য কল করতে পারেন?


581

একটি নিয়ামক অন্য ব্যবহার করা সম্ভব?

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

এই এইচটিএমএল ডকুমেন্টটি কেবল ফাইলের MessageCtrlমধ্যে নিয়ামক দ্বারা সরবরাহিত একটি বার্তা মুদ্রণ করে messageCtrl.js

<html xmlns:ng="http://angularjs.org/">
<head>
    <meta charset="utf-8" />
    <title>Inter Controller Communication</title>
</head>
<body>
    <div ng:controller="MessageCtrl">
        <p>{{message}}</p>
    </div>

    <!-- Angular Scripts -->
    <script src="http://code.angularjs.org/angular-0.9.19.js" ng:autobind></script>
    <script src="js/messageCtrl.js" type="text/javascript"></script>
</body>
</html>

নিয়ামক ফাইলটিতে নিম্নলিখিত কোড রয়েছে:

function MessageCtrl()
{
    this.message = function() { 
        return "The current date is: " + new Date().toString(); 
    };
}

যা কেবল বর্তমান তারিখটি মুদ্রণ করে;

আমি যদি অন্য কোনও নিয়ামক যুক্ত করতে পারি, DateCtrlযেটি একটি নির্দিষ্ট ফর্ম্যাটে তারিখটি ফিরিয়ে দেয় MessageCtrl, তবে কীভাবে কেউ এই কাজটি করবে? ডিআই কাঠামোটি XmlHttpRequestsপরিষেবাদিগুলির সাথে সম্পর্কিত এবং অ্যাক্সেসের সাথে সম্পর্কিত বলে মনে হচ্ছে ।


4
এই গুগল গ্রুপ থ্রেড, groups.google.com/d/topic/angular/m_mn-8gnNt4/ddusussion , নিয়ন্ত্রকরা একে অপরের সাথে কথা বলতে পারে এমন 5 টি উপায় নিয়ে আলোচনা করে।
রাজকোক

এখানে ইতিমধ্যে ভাল উত্তর রয়েছে, সুতরাং আমি কেবল উল্লেখ করতে চাই যে নির্দিষ্ট ব্যবহারের ক্ষেত্রে উল্লেখ করা হয়েছে, সম্ভবত কোনও অ্যাঙ্গুলারজেএস ফিল্টার আরও ভাল সমাধান হতে পারে? ভেবেছিলাম আমি এটি উল্লেখ করেছি :)
জো ডিনডালে

উত্তর:


705

নিয়ন্ত্রণকারীদের মধ্যে কীভাবে যোগাযোগ করবেন তার একাধিক উপায় রয়েছে ways

সেরাটি সম্ভবত কোনও পরিষেবা ভাগ করছে:

function FirstController(someDataService) 
{
  // use the data service, bind to template...
  // or call methods on someDataService to send a request to server
}

function SecondController(someDataService) 
{
  // has a reference to the same instance of the service
  // so if the service updates state for example, this controller knows about it
}

আর একটি উপায় সুযোগের ভিত্তিতে একটি ইভেন্ট নির্গমন করছে:

function FirstController($scope) 
{
  $scope.$on('someEvent', function(event, args) {});
  // another controller or even directive
}

function SecondController($scope) 
{
  $scope.$emit('someEvent', args);
}

উভয় ক্ষেত্রেই আপনি যে কোনও নির্দেশের সাথে যোগাযোগ করতে পারেন।


4
হিয়া, প্রথম উদাহরণটির জন্য ওয়েব পৃষ্ঠার স্ট্যাকের সমস্ত পরিষেবা সম্পর্কে সচেতন হওয়া দরকার। যা খারাপ গন্ধ অনুভব করে (?) দ্বিতীয়টির মতো, ওয়েব পৃষ্ঠাকে সুযোগ আর্গুমেন্ট সরবরাহ করার প্রয়োজন হবে না?
ব্যাংকসান

54
কি? কেন? সমস্ত কন্ট্রোলার অ্যাংুলারের ডিআই দ্বারা ইনজেকশন দেওয়া হয়।
ভোজটা

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

137
এই দেরিতে আসছেন: আপনি ছেলেরা জানেন যে আপনি গুগল থেকে ভোজটার সাথে তর্ক করছেন যা অ্যাঙ্গুলারজেএস-এ কাজ করে, তাই না? :)
সুমন

16
এটি আমার কাছে স্পষ্ট ছিল না যে আমার এইচটিএমএলে ইভেন্ট-নির্গমনকারী নিয়ামককে কাজ করার জন্য শ্রোতা নিয়ামকের একটি শিশু-নোড হতে হবে।
জাজানগৌত

122

এই ঝাঁকুনি দেখুন: http://jsfiddle.net/simpulton/XqDxG/

নিম্নলিখিত ভিডিওটি দেখুন: কন্ট্রোলারদের মধ্যে যোগাযোগ করা

এইচটিএমএল:

<div ng-controller="ControllerZero">
  <input ng-model="message" >
  <button ng-click="handleClick(message);">LOG</button>
</div>

<div ng-controller="ControllerOne">
  <input ng-model="message" >
</div>

<div ng-controller="ControllerTwo">
  <input ng-model="message" >
</div>

জাভাস্ক্রিপ্ট:

var myModule = angular.module('myModule', []);
myModule.factory('mySharedService', function($rootScope) {
  var sharedService = {};

  sharedService.message = '';

  sharedService.prepForBroadcast = function(msg) {
    this.message = msg;
    this.broadcastItem();
  };

  sharedService.broadcastItem = function() {
    $rootScope.$broadcast('handleBroadcast');
  };

  return sharedService;
});

function ControllerZero($scope, sharedService) {
  $scope.handleClick = function(msg) {
    sharedService.prepForBroadcast(msg);
  };

  $scope.$on('handleBroadcast', function() {
    $scope.message = sharedService.message;
  });        
}

function ControllerOne($scope, sharedService) {
  $scope.$on('handleBroadcast', function() {
    $scope.message = 'ONE: ' + sharedService.message;
  });        
}

function ControllerTwo($scope, sharedService) {
  $scope.$on('handleBroadcast', function() {
    $scope.message = 'TWO: ' + sharedService.message;
  });
}

ControllerZero.$inject = ['$scope', 'mySharedService'];        

ControllerOne.$inject = ['$scope', 'mySharedService'];

ControllerTwo.$inject = ['$scope', 'mySharedService'];

12
উপরের ফিডাল এবং ভিডিও একটি পরিষেবা ভাগ করে। এখানে এমন একটি ফ্রিডল
মার্ক রাজকক

1
@ অ্যাডার্ডাইন: আমি একই সংযোগ এবং নির্দেশাবলীর জন্য অর্থপূর্ণ উদাহরণটি পড়তে পছন্দ করতাম (এই উত্তরের জন্যও ধন্যবাদ!)
এস্কার্ডুজিও

দুর্দান্ত উত্তর, আমি myModule.service এর পরিবর্তে myModule.service ('mySharedS सर्विस', ফাংশন ($ rootScope) {}) ব্যবহার করি তবে এটি কম কাজ করে না!
ট্যাকোইটার

চমৎকার। যদিও, আমার একটি প্রশ্ন আছে: আপনি কেন কন্ট্রোলজারের মধ্যে কোনও হ্যান্ডলার যুক্ত করলেন? $ স্কোপ।
চিড়িয়াখানা

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

53

আপনি যদি একজন নিয়ন্ত্রণকারীকে অন্যটিতে কল করতে চান তবে এখানে চারটি পদ্ধতি উপলব্ধ রয়েছে

  1. $ রুটস্কোপ। $ নির্গত () এবং $ রুটস্কোপ $ সম্প্রচার ()
  2. দ্বিতীয় নিয়ামক যদি শিশু হয় তবে আপনি পিতামাতার শিশু যোগাযোগ ব্যবহার করতে পারেন।
  3. পরিষেবাগুলি ব্যবহার করুন
  4. ধরণের হ্যাক - কৌণিক.এলিমেন্টের সাহায্যে ()

1. $ রুটস্কোপ। Mit নির্গত () এবং $ রুটস্কোপ। সম্প্রচার ()

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

আপনি যদি অভিভাবক থেকে সন্তানের কাছে যোগাযোগ সম্পাদন করে থাকেন এবং এমনকি শিশু তার ভাইবোনদের সাথে যোগাযোগ করতে চায় তবে আপনি $ সম্প্রচারটি ব্যবহার করতে পারেন

যদি আপনি বাচ্চা থেকে পিতামাতার কাছে যোগাযোগ সম্পাদন করে থাকেন তবে কোনও ভাইবোন চলাফেরা করে না তবে আপনি $ rootScope $ emit ব্যবহার করতে পারেন mit

এইচটিএমএল

<body ng-app="myApp">
    <div ng-controller="ParentCtrl" class="ng-scope">
      // ParentCtrl
      <div ng-controller="Sibling1" class="ng-scope">
        // Sibling first controller
      </div>
      <div ng-controller="Sibling2" class="ng-scope">
        // Sibling Second controller
        <div ng-controller="Child" class="ng-scope">
          // Child controller
        </div>
      </div>
    </div>
</body>

Angularjs কোড

 var app =  angular.module('myApp',[]);//We will use it throughout the example 
    app.controller('Child', function($rootScope) {
      $rootScope.$emit('childEmit', 'Child calling parent');
      $rootScope.$broadcast('siblingAndParent');
    });

app.controller('Sibling1', function($rootScope) {
  $rootScope.$on('childEmit', function(event, data) {
    console.log(data + ' Inside Sibling one');
  });
  $rootScope.$on('siblingAndParent', function(event, data) {
    console.log('broadcast from child in parent');
  });
});

app.controller('Sibling2', function($rootScope) {
  $rootScope.$on('childEmit', function(event, data) {
    console.log(data + ' Inside Sibling two');
  });
  $rootScope.$on('siblingAndParent', function(event, data) {
    console.log('broadcast from child in parent');
  });
});

app.controller('ParentCtrl', function($rootScope) {
  $rootScope.$on('childEmit', function(event, data) {
    console.log(data + ' Inside parent controller');
  });
  $rootScope.$on('siblingAndParent', function(event, data) {
    console.log('broadcast from child in parent');
  });
});

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

২. যদি দ্বিতীয় নিয়ামক শিশু হন তবে আপনি চাইল্ড প্যারেন্ট যোগাযোগ ব্যবহার করতে পারেন

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

উদাহরণস্বরূপ এইচটিএমএল: -

<div ng-controller="ParentCtrl">
 <div ng-controller="ChildCtrl">
 </div>
</div>

Angularjs

 app.controller('ParentCtrl', function($scope) {
   $scope.value='Its parent';
      });
  app.controller('ChildCtrl', function($scope) {
   console.log($scope.value);
  });

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

3.উস সার্ভিস

অ্যাঙ্গুলারজেএস পরিষেবাদি আর্কিটেকচার ব্যবহার করে "কনসার্নস অফ সেকশনস" ধারণার সমর্থন করে । পরিষেবাদি জাভাস্ক্রিপ্ট ফাংশন এবং কেবলমাত্র একটি নির্দিষ্ট কাজগুলি করার জন্য দায়বদ্ধ his এটি তাদেরকে একটি পৃথক সত্তা করে তোলে যা রক্ষণাবেক্ষণযোগ্য এবং পরীক্ষামূলক।

Angularjs কোড:

app.service('communicate',function(){
  this.communicateValue='Hello';
});

app.controller('ParentCtrl',function(communicate){//Dependency Injection
  console.log(communicate.communicateValue+" Parent World");
});

app.controller('ChildCtrl',function(communicate){//Dependency Injection
  console.log(communicate.communicateValue+" Child World");
});

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

4. হ্যাকের ধরণ - কৌণিক.এলিমেন্টের সাহায্যে ()

এই পদ্ধতিটি তার আইডি / অনন্য শ্রেণীর দ্বারা উপাদান থেকে সুযোগ পায়।

এইচটিএমএল: -

<div id='parent' ng-controller='ParentCtrl'>{{varParent}}
 <span ng-click='getValueFromChild()'>Click to get ValueFormChild</span>
 <div id='child' ng-controller='childCtrl'>{{varChild}}
   <span ng-click='getValueFromParent()'>Click to get ValueFormParent </span>
 </div>
</div>

Angularjs: -

app.controller('ParentCtrl',function($scope){
 $scope.varParent="Hello Parent";
  $scope.getValueFromChild=function(){
  var childScope=angular.element('#child').scope();
  console.log(childScope.varChild);
  }
});

app.controller('ChildCtrl',function($scope){
 $scope.varChild="Hello Child";
  $scope.getValueFromParent=function(){
  var parentScope=angular.element('#parent').scope();
  console.log(parentScope.varParent);
  }
}); 

উপরের কোড কন্ট্রোলাররা এইচটিএমএলে তাদের নিজস্ব মান দেখাচ্ছে এবং আপনি যখন পাঠ্যের উপর ক্লিক করবেন তখন সেই অনুসারে আপনি কনসোলে মান পাবেন I


52

দুটি নিয়ন্ত্রণকারীর পরিষেবা ডেটা ভাগ করে নেওয়ার এক পৃষ্ঠার উদাহরণ এখানে:

<!doctype html>
<html ng-app="project">
<head>
    <title>Angular: Service example</title>
    <script src="http://code.angularjs.org/angular-1.0.1.js"></script>
    <script>
var projectModule = angular.module('project',[]);

projectModule.factory('theService', function() {  
    return {
        thing : {
            x : 100
        }
    };
});

function FirstCtrl($scope, theService) {
    $scope.thing = theService.thing;
    $scope.name = "First Controller";
}

function SecondCtrl($scope, theService) {   
    $scope.someThing = theService.thing; 
    $scope.name = "Second Controller!";
}
    </script>
</head>
<body>  
    <div ng-controller="FirstCtrl">
        <h2>{{name}}</h2>
        <input ng-model="thing.x"/>         
    </div>

    <div ng-controller="SecondCtrl">
        <h2>{{name}}</h2>
        <input ng-model="someThing.x"/>             
    </div>
</body>
</html>

এছাড়াও এখানে: https://gist.github.com/3595424


এবং যদি theServiceআপডেট হয় thing.x, তবে সেই পরিবর্তনটি স্বয়ংক্রিয়ভাবে <ইনপুট> এর মধ্যে FirstCtrlএবং SecondCtrlঠিক আছে? এবং thing.xদুটি <ইনপুট> গুলি (ডান?) এর মধ্য দিয়ে যে কেউ সরাসরি পরিবর্তন করতে পারে ।
KajMagnus

4
হ্যাঁ. সমস্ত কৌণিক পরিষেবা হ'ল অ্যাপ্লিকেশন সিঙ্গেলটন, যার অর্থ সার্ভিসের একমাত্র উদাহরণ রয়েছে। তথ্যসূত্র: ডকস.আঙ্গুলারজস.আর / গাইড / দেবদেবী_গাইড.সার্ভিসেস.ক্রিটিং_সার্ভেসিস
গাইড

আমার আগের মন্তব্যে লিংকটি 404, তাই এখানে পরিষেবা নির্দেশিকা আজ, যে নোটগুলি পরিষেবাগুলি একক: সিলেটনস রয়েছে ডকস.আঙ্গুলারজ.স.আর
গাইড

1
@ এক্সসিএলএসআর হ্যাঁ! দুঃখিত আমি এর আগে মিস করেছি
কোডি বাগস্টিন

3
এখন পর্যন্ত ওয়েবে আমি সবচেয়ে ভাল উদাহরণটি দেখেছি। ধন্যবাদ
সিরিয়েনার্থস

33

যদি আপনি নিয়ন্ত্রণকারীদের মধ্যে ডেটা ভাগ করতে বা ফাংশন কল করতে ইভেন্টগুলি নির্গমন ও সম্প্রচারের দিকে তাকিয়ে থাকেন তবে দয়া করে এই লিঙ্কটি দেখুন : এবং zbynourউত্তরটি সর্বাধিক ভোটের সাহায্যে দেখুন। আমি তার উত্তর উদ্ধৃত করছি !!!

যদি ফার্স্টসিটিএলএল এর স্কোপ দ্বিতীয়Ctrl স্কোপের পিতা বা মাতা হয় তবে আপনার কোডটি প্রথম Ctrl- এ সম্প্রচারিত দ্বারা $ emit দ্বারা প্রতিস্থাপন করে কাজ করা উচিত:

function firstCtrl($scope){
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope){
    $scope.$on('someEvent', function(event, mass) {console.log(mass)});
}

আপনার স্কোপের মধ্যে পিতামাতার সাথে সন্তানের সম্পর্ক না থাকলে আপনি নিয়ামকটিতে $ রুটস্কোপ ইনজেকশন করতে পারেন এবং ইভেন্টটি সমস্ত শিশু স্কোপে (অর্থাত সেকেন্ডসিটিএল) সম্প্রচার করতে পারেন।

function firstCtrl($rootScope){
    $rootScope.$broadcast('someEvent', [1,2,3]);
}

অবশেষে, যখন আপনার শিশু নিয়ামক থেকে স্কোপগুলি উপরের দিকে প্রেরণের দরকার হয় তখন আপনি "স্কোপ" mit নির্গত করতে পারেন। যদি ফার্স্টসিটিএলএল এর স্কোপ দ্বিতীয়Ctrl স্কোপের পিতা বা মাতা হয়:

function firstCtrl($scope){
    $scope.$on('someEvent', function(event, data) { console.log(data); });
}

function secondCtrl($scope){
    $scope.$emit('someEvent', [1,2,3]);
}

24

আরও দুটি ফিডল: (অ-পরিষেবা পদ্ধতির)

1) $scopeপিতামাতার জন্য- শিশু নিয়ামক - ইভেন্টগুলি নির্গমন / সম্প্রচারের জন্য পিতামাতার নিয়ামক ব্যবহার । http://jsfiddle.net/laan_sachin/jnj6y/

2) $rootScopeঅ-সম্পর্কিত কন্ট্রোলার জুড়ে ব্যবহার । http://jsfiddle.net/VxafF/


ঘটনা নিয়ে এত জটিলতার কারণ কী? কেন এমন কিছু করবেন না? jsfiddle.net/jnj6y/32
Dfr

এটি নির্ভর করে কী ধরণের পিতামাতার সাথে সম্পর্ক সঠিক। এটি কোনও ডোমের উত্তরাধিকারী হতে পারে, এটি এরকম ঘটনা আপনাকে জিনিসগুলি ডিকুয়াল করার অনুমতি দেয়।
ডার্কনাট

17

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

আমি কোনও পরিষেবা ব্যবহার করার পরামর্শ দেব। আমি সম্প্রতি আমার প্রকল্পগুলির একটিতে এটি কীভাবে বাস্তবায়ন করেছি তা এখানে - https://gist.github.com/3384419

বেসিক ধারণা - পরিষেবা হিসাবে একটি পাব-সাব / ইভেন্ট বাসটি নিবন্ধ করুন। তারপরে সেই ইভেন্টের বাসটি ইনজেক্ট করুন যেখানে কখনও আপনার ইভেন্ট / বিষয়গুলি সাবস্ক্রাইব বা প্রকাশ করতে হবে।


5

আমি এই উপায় সম্পর্কে জানি।

angular.element($('#__userProfile')).scope().close();

তবে আমি এটি খুব বেশি ব্যবহার করি না, কারণ আমি কৌনিক কোডে jQuery নির্বাচক ব্যবহার করতে পছন্দ করি না।


সেরা উত্তর। এত সহজ এবং সহজ ... =)
zVictor

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

2
@ ব্রায়াননোহ, সত্য ঠিক আছে এই কোডটি প্রোটোটাইপ বা কিছু পরীক্ষার জন্য ব্যবহার করুন, তবে উত্পাদন কোডের জন্য নয়।
অ্যান্ড্রে কোরচাক

1
এটিই সবচেয়ে খারাপ। পরিষেবাগুলিতে ডিওএম হেরফের এবং সরাসরি সুযোগ অ্যাক্সেস।
মাতটিয়া ফ্রেঞ্চতেটো

3

পরিষেবাগুলির উপর নির্ভরশীল নয় এমন একটি পদ্ধতি রয়েছে $broadcastবা $emit। এটি সব ক্ষেত্রেই উপযুক্ত নয়, তবে আপনার যদি 2 সম্পর্কিত কন্ট্রোলার থাকে যেগুলি নির্দেশনায় বিমুগ্ধ হতে পারে তবে আপনি এটি ব্যবহার করতে পারেনrequire নির্দেশিকার সংজ্ঞাটিতে বিকল্পটি । এটি সম্ভবত এনজিএমডেল এবং এনজিফর্ম যোগাযোগ করে। আপনি এটিকে নেস্টিভেট করা নির্দেশিকা নিয়ন্ত্রকদের মধ্যে বা একই উপাদানটির সাথে যোগাযোগ করতে ব্যবহার করতে পারেন।

পিতামাতার / সন্তানের অবস্থার জন্য, ব্যবহারটি নীচে হবে:

<div parent-directive>
  <div inner-directive></div>
</div>

এবং এটি কার্যকর করার মূল বিষয়গুলি: পিতামাতার নির্দেশনায়, যে পদ্ধতিগুলি কল করা হবে সেগুলি সহ, আপনি সেগুলি this(চালু না $scope) হিসাবে সংজ্ঞায়িত করতে হবে :

controller: function($scope) {
  this.publicMethodOnParentDirective = function() {
    // Do something
  }
}

শিশু নির্দেশের সংজ্ঞা অনুসারে, আপনি requireবিকল্পটি ব্যবহার করতে পারেন যাতে পিতামাতার নিয়ন্ত্রকটিকে লিঙ্ক ফাংশনে স্থান দেওয়া হয় (যাতে আপনি তারপরে scopeশিশু নির্দেশের দিক থেকে এটিতে ফাংশনগুলি কল করতে পারেন) ।

require: '^parentDirective',
template: '<span ng-click="onClick()">Click on this to call parent directive</span>',
link: function link(scope, iElement, iAttrs, parentController) {
  scope.onClick = function() {
    parentController.publicMethodOnParentDirective();
  }
}

উপরেরগুলি http://plnkr.co/edit/poeq460VmQER8Gl9w8Oz?p= পূর্বরূপে দেখা যাবে

একটি ভাইবোন নির্দেশ একইভাবে ব্যবহৃত হয়, তবে একই উপাদান উভয় নির্দেশিকা:

<div directive1 directive2>
</div>

এখানে একটি পদ্ধতি তৈরি করে ব্যবহৃত directive1:

controller: function($scope) {
  this.publicMethod = function() {
    // Do something
  }
}

এবং ডাইরেক্টিভ 2 এ এই requireবিকল্পটি ব্যবহার করে কল করা যেতে পারে যার ফলে সিব্লিংকন্ট্রোলার লিঙ্ক ফাংশনে উত্তীর্ণ হয়:

require: 'directive1',
template: '<span ng-click="onClick()">Click on this to call sibling directive1</span>',
link: function link(scope, iElement, iAttrs, siblingController) {
  scope.onClick = function() {
    siblingController.publicMethod();
  }
}

এটি http://plnkr.co/edit/MUD2snf9zvadfnDXq85w?p= পূর্বরূপে দেখা যাবে ।

এর ব্যবহার কি?

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

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


3

আমি জানি না এটি মানদণ্ডের বাইরে কিনা তবে আপনার যদি একই ফাইলটিতে আপনার সমস্ত কন্ট্রোলার থাকে তবে আপনি এই জাতীয় কিছু করতে পারেন:

app = angular.module('dashboardBuzzAdmin', ['ngResource', 'ui.bootstrap']);

var indicatorsCtrl;
var perdiosCtrl;
var finesCtrl;

app.controller('IndicatorsCtrl', ['$scope', '$http', function ($scope, $http) {
  indicatorsCtrl = this;
  this.updateCharts = function () {
    finesCtrl.updateChart();
    periodsCtrl.updateChart();
  };
}]);

app.controller('periodsCtrl', ['$scope', '$http', function ($scope, $http) {
  periodsCtrl = this;
  this.updateChart = function() {...}
}]);

app.controller('FinesCtrl', ['$scope', '$http', function ($scope, $http) {
  finesCtrl = this;
  this.updateChart = function() {...}
}]);

আপনি দেখতে পাচ্ছেন যে সূচকগুলি সিআরটিএল আপডেটচার্টে কল করার সময় অন্য উভয় নিয়ামকের আপডেটচার্ট ফানকিশনকে কল করছে।


2

আপনি আপনার প্যারেন্ট কন্ট্রোলারে (মেসেজসিটিআরএল) '$ কন্ট্রোলার' পরিষেবাটি ইনজেক্ট করতে পারেন এবং তারপরে শিশু কন্ট্রোলার (ডেটসিআরটিএল) ইনস্ট্যান্টিয়েট / ইনজেকশন করতে পারেন:
$scope.childController = $controller('childController', { $scope: $scope.$new() });

এখন আপনি আপনার সন্তানের নিয়ন্ত্রকের কাছ থেকে ডেটা অ্যাক্সেস করতে পারেন কারণ এটি একটি পরিষেবা হিসাবে এর পদ্ধতিগুলি কল করে।
কোন সমস্যা হলে আমাকে জানাবেন।


1

নিম্নলিখিত publish-subscribeকৌনিক জেএস নির্বিশেষে একটি পদ্ধতির অনুসরণ করা হয় ।

পরম নিয়ন্ত্রক অনুসন্ধান করুন

//Note: Multiple entities publish the same event
regionButtonClicked: function () 
{
        EM.fireEvent('onSearchParamSelectedEvent', 'region');
},

plantButtonClicked: function () 
{
        EM.fireEvent('onSearchParamSelectedEvent', 'plant');
},

অনুসন্ধান পছন্দসমূহ নিয়ন্ত্রক

//Note: It subscribes for the 'onSearchParamSelectedEvent' published by the Search Param Controller
localSubscribe: function () {
        EM.on('onSearchParamSelectedEvent', this.loadChoicesView, this);

});


loadChoicesView: function (e) {

        //Get the entity name from eData attribute which was set in the event manager
        var entity = $(e.target).attr('eData');

        console.log(entity);

        currentSelectedEntity = entity;
        if (entity == 'region') {
            $('.getvalue').hide();
            this.loadRegionsView();
            this.collapseEntities();
        }
        else if (entity == 'plant') {
            $('.getvalue').hide();
            this.loadPlantsView();
            this.collapseEntities();
        }


});

অনুষ্ঠান ব্যাবস্থাপক

myBase.EventManager = {

    eventArray:new Array(),


    on: function(event, handler, exchangeId) {
        var idArray;
        if (this.eventArray[event] == null) {
            idArray = new Array();
        } else { 
            idArray = this.eventArray[event];
        }
        idArray.push(exchangeId);
        this.eventArray[event] = idArray;

        //Binding using jQuery
        $(exchangeId).bind(event, handler);
    },

    un: function(event, handler, exchangeId) {

        if (this.eventArray[event] != null) {
            var idArray = this.eventArray[event];
            idArray.pop(exchangeId);
            this.eventArray[event] = idArray;

            $(exchangeId).unbind(event, handler);
        }
    },

    fireEvent: function(event, info) {
        var ids = this.eventArray[event];

        for (idindex = 0; idindex < ids.length; idindex++) {
            if (ids[idindex]) {

                //Add attribute eData
                $(ids[idindex]).attr('eData', info);
                $(ids[idindex]).trigger(event);
            }
        }
    }
};

বিশ্বব্যাপী

var EM = myBase.EventManager;

1

কৌণিক 1.5 তে নিম্নলিখিতগুলি সম্পাদন করে এটি সম্পাদন করা যেতে পারে:

(function() {
  'use strict';

  angular
    .module('app')
    .component('parentComponent',{
      bindings: {},
      templateUrl: '/templates/products/product.html',
      controller: 'ProductCtrl as vm'
    });

  angular
    .module('app')
    .controller('ProductCtrl', ProductCtrl);

  function ProductCtrl() {
    var vm = this;
    vm.openAccordion = false;

    // Capture stuff from each of the product forms
    vm.productForms = [{}];

    vm.addNewForm = function() {
      vm.productForms.push({});
    }
  }

}());

এটি প্যারেন্ট উপাদান। এটিতে আমি একটি ফাংশন তৈরি করেছি যা আমার productFormsঅ্যারেতে অন্য একটি বস্তুকে ঠেলে দেয় - দ্রষ্টব্য - এটি কেবল আমার উদাহরণ, এই ফাংশনটি সত্যই কিছু হতে পারে।

এখন আমরা অন্য একটি উপাদান তৈরি করতে পারি যা এর ব্যবহার করবে require:

(function() {
  'use strict';

  angular
    .module('app')
    .component('childComponent', {
      bindings: {},
      require: {
        parent: '^parentComponent'
      },
      templateUrl: '/templates/products/product-form.html',
      controller: 'ProductFormCtrl as vm'
    });

  angular
    .module('app')
    .controller('ProductFormCtrl', ProductFormCtrl);

  function ProductFormCtrl() {
    var vm = this;

    // Initialization - make use of the parent controllers function
    vm.$onInit = function() {
      vm.addNewForm = vm.parent.addNewForm;
    };  
  }

}());

এখানে শিশু উপাদানটি পিতামাতার উপাদান ফাংশনের জন্য একটি রেফারেন্স তৈরি করছে addNewFormযা তারপরে এইচটিএমএলকে আবদ্ধ হতে পারে এবং অন্য কোনও ফাংশনের মতো কল করা যেতে পারে।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.