javascript - আমি কৌনিকজাল ইউআই-রাউটারের মধ্যে কীভাবে $ স্কোপ ডেটা ভাগ করব?




angularjs angularjs-scope (4)

আপনি পুরো স্কোপটি $rootScope মাধ্যমে পেতে পারেন। আপনার যদি সুযোগের কেবলমাত্র অংশের প্রয়োজন হয় তবে ইউআই-রাউটারের একটি কাস্টম ডেটা বৈশিষ্ট্য রয়েছে।

মাল্টি-স্টেপ ফর্ম কীভাবে করবেন তা এখানে। প্রবাহের পদক্ষেপগুলির জন্য আমার তথ্যের জন্য রুটগুলির প্রয়োজন ছিল।

প্রথমত, ইউআই-রাউটার সহ আমার কয়েকটি রুট রয়েছে:

  // Sign UP routes
  .state('sign-up', {
    abstract: true,
    url: '/sign-up',
    controller: 'SignupController',
    templateUrl: 'sign-up/index.html',
  })
  .state('sign-up.start', {
    url: '-start',
    templateUrl: 'sign-up/sign-up.start.html',
    data: { step: 0, title: 'Welcome to Mars!', },
  })
  .state('sign-up.expertise', {
    url: '-expertise',
    templateUrl: 'sign-up/sign-up.expertise.html',
    data: { step: 1, title: 'Your Expertise'},
  })

বিজ্ঞপ্তি:

  • প্রতিটি রুটে data উপাদান।
  • abstract স্থিতিতে SignupController । এই বহু-পদক্ষেপের ফর্মের জন্য এটিই একমাত্র নিয়ামক। abstract আবশ্যক নয়, তবে এই ব্যবহারের ক্ষেত্রে এটি উপলব্ধি করে।

SignupController.js

angular.module('app').controller('SignupController', function($scope, $state) {
  $scope.state = $state;
});

এখানে আমরা ইউআই-রাউটারের $state পেয়েছি এবং এটিকে $scope

এখানে মূল সারণি 'সাইন-আপ / সূচক html' রয়েছে:

<h2>{{state.current.data.title}}</h2>

<div>This is a multi-step-progress control {{state.current.data.step}}</div>

<form id="signUpForm" name="signUpForm" novalidate>
  <div ui-view></div>
</form>

চাইল্ড টেমপ্লেটগুলি তাদের পছন্দ মতো হতে পারে।

প্যারেন্ট কন্ট্রোলারে কোনও পরিষেবা ব্যবহার না করা বা প্রহরী তৈরি করা ছাড়াই কীভাবে কেউ বাচ্চাদের রাজ্যগুলিকে মূল নিয়ামকের $scope অ্যাক্সেস দেয়।

  .state("main", {
      controller:'mainController',
      url:"/main",
      templateUrl: "main_init.html"
  })  
  .state("main.1", {
      controller:'mainController',
      parent: 'main',
      url:"/1",
      templateUrl: 'form_1.html'
  })  
  .state("main.2", {
      controller:'mainController',
      parent: 'main',
      url: "/2",
      templateUrl: 'form_2.html'
  })  

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


আপনি প্রতিটি কন্ট্রোলারে অ্যাক্সেস করতে পারেন এমন একটি পরিষেবাতে গ্রুপ ভাগ করে নেওয়া ভেরিয়েবলগুলির সহজ সমাধান নয়? ...


আমি কীভাবে $scope এবং ইউআই-রাউটার ব্যবহার করবেন তা দেখিয়ে ওয়ার্কিং প্লঙ্কার তৈরি করেছি।

রাষ্ট্রীয় সংজ্ঞাটি অপরিবর্তিত:

$stateProvider
    // States
 .state("main", {
      controller:'mainController',
      url:"/main",
      templateUrl: "main_init.html"
  })  
  .state("main.1", {
      controller:'mainController',
      parent: 'main',
      url:"/1",
      templateUrl: 'form_1.html'
  })  
  .state("main.2", {
      controller:'mainController',
      parent: 'main',
      url: "/2",
      templateUrl: 'form_2.html'
  })  

তবে প্রতিটি রাজ্যে আলাদা আলাদা নিয়ামক থাকতে পারে। কেন? কারণ প্রতিটি রাজ্যের প্রতিটি view সংজ্ঞায়িত controller new উদাহরণ পায়। সুতরাং যখন আমাদের নীচের মতো mainController , আমরা নিশ্চিত হতে পারি, আমরা যদি 'main.2' নেভিগেট করি তবে এটি দু'বার তাত্ক্ষণিকভাবে চালু হবে।

controller('mainController', function ($scope) {
  $scope.Model = $scope.Model || {Name : "xxx"};
})

তবে আমরা এখানে যা দেখতে পাচ্ছি তা $scope.Model we $scope.Model ইতিমধ্যে উপস্থিত রয়েছে কিনা তা আমরা যাচাই করি ... এবং যদি না হয় (প্যারেন্ট স্টেট) তবে আমরা এটি নতুন ইন্টেন্স দিয়ে ইনস্ট্যান্ট করি {Name : "xxx"} এক্সএক্সএক্সএক্স {Name : "xxx"}

ঠিক আছে, আমি যা বলছি তা হ'ল: প্যারেন্ট $scope.Model করবে $scope.Model । অন্য সমস্ত এটি ইতিমধ্যে পূরণ করা হবে। কিভাবে? ভাল, এখানে উত্তর:

কেবলমাত্র হায়ারার্কি দ্বারা স্কোপ উত্তরাধিকার

মনে রাখবেন যে সুযোগগুলির বৈশিষ্ট্যগুলি কেবলমাত্র রাষ্ট্রের শৃঙ্খলে উত্তরাধিকার সূত্রে উত্তরাধিকার সূত্রে উত্তীর্ণ হয় যদি আপনার রাজ্যগুলির মতামত বাসা বাঁধে। স্কোপ বৈশিষ্ট্যের উত্তরাধিকার আপনার রাজ্যের বাসা বাঁধার এবং আপনার দর্শন (টেমপ্লেট) এর বাসা বাঁধার সাথে করার কিছুই নেই।

এটি সম্পূর্ণরূপে সম্ভব যে আপনি নেস্টেড রাজ্যগুলি করেছেন যার টেমপ্লেটগুলি আপনার সাইটের মধ্যে বিভিন্ন অ-নেস্টেড লোকেশনগুলিতে ইউআই-ভিউ তৈরি করে। এই পরিস্থিতিতে আপনি বাচ্চাদের রাজ্যের দর্শনগুলির মধ্যে প্যারেন্ট রাষ্ট্রের দৃষ্টিভঙ্গির স্কোপ ভেরিয়েবলগুলি অ্যাক্সেস করার আশা করতে পারবেন না।

সুতরাং, ডকুমেন্টেশন হিসাবে বলা হয়েছে। আমাদের সন্তানের মতামত পিতামাতার ভিউতে বাসা বাঁধার কারণে সুযোগটি উত্তরাধিকার সূত্রে প্রাপ্ত।

স্কোপগুলি বোঝা

অ্যাঙ্গুলারজেএস-এ, একটি শিশু স্কোপ সাধারণত প্রোটোটাইপিকভাবে পিতামাতার স্কোপ থেকে উত্তরাধিকার সূত্রে প্রাপ্ত হয়।
...

হচ্ছে একটি '.' আপনার মডেলগুলিতে প্রোটোটাইপাল উত্তরাধিকার কার্যকর রয়েছে তা নিশ্চিত করবে।

// So, use
<input type="text" ng-model="someObj.prop1"> 
// rather than
<input type="text" ng-model="prop1">.

এবং এটাই. আমরা UI-Router ভিউ এবং কৌনিক স্কোপগুলি থেকে উত্তরাধিকার পাই, এবং কারণ আমরা স্মার্টভাবে একটি রেফারেন্স টাইপ ( Model ) ব্যবহার করেছি, যেমন আছে '.' ng-model সংজ্ঞায় ডট - আমরা এখন ডেটা ভাগ করতে পারি

দ্রষ্টব্য: বিন্দু ' ng-model="Model.PropertyName সহজ অর্থ হল, কিছু সম্পত্তি সহ Model {} object a একটি reference অবজেক্ট রয়েছে: PropertyName

এখানে কাজের উদাহরণটি দেখুন


ধারণাটি হল যে আপনি পিতামাতার-> সন্তানের উত্তরাধিকারে স্কোপ ব্যবহার করেন:

 .state("main", {
      controller:'mainController',
      abstract: true,
      url:"/main",
      templateUrl: "main_init.html"
  })  
  .state("main.1", {
      controller:'mainController1',
      parent: 'main',
      url:"/1",
      templateUrl: 'form_1.html'
  })  
  .state("main.2", {
      controller:'mainController2',
      parent: 'main',
      url: "/2",
      templateUrl: 'form_2.html'
  })  

ব্যবহার সহজ করার চেয়েও আপনার কাছে 3 জন নিয়ামক রয়েছে, একটি ভাগ করে নেওয়া হয় (মেইনকন্ট্রোলার) এবং প্রতিটি দর্শনটির নিজস্ব থাকে।





angular-ui-router