AngularJS শিশু নিয়ামক থেকে পিতামাতার সুযোগ অ্যাক্সেস করে

Question

আমি আমার কন্ট্রোলার ব্যবহার করে সেট আপ করেছি data-ng-controller="xyzController as vm"

আমার পিতামাতা / শিশু নেস্টেড নিয়ন্ত্রকদের সাথে একটি দৃশ্য আছে scenario নেস্টেড এইচটিএমএল ব্যবহার করে প্যারেন্টের সম্পত্তিগুলিতে অ্যাক্সেস করতে আমার কোনও সমস্যা নেই $parent.vm.propertyতবে আমার শিশু নিয়ামকের মধ্যে থেকে কীভাবে পিতামাতার সম্পত্তি অ্যাক্সেস করবেন তা আমি বুঝতে পারি না।

আমি ইনজেকশন $ স্কোপ এবং পরে ব্যবহার করার চেষ্টা করেছি $scope.$parent.vm.property, কিন্তু এটি কাজ করছে না?

কেউ পরামর্শ দিতে পারেন?

Answer 1

যদি আপনার এইচটিএমএল নীচের মতো হয় তবে আপনি এটির মতো কিছু করতে পারেন:

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

তারপরে আপনি নীচের মত প্যারেন্ট স্কোপ অ্যাক্সেস করতে পারবেন

function ParentCtrl($scope) {
    $scope.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentcities = $scope.$parent.cities;
}

আপনি যদি নিজের দৃষ্টিভঙ্গি থেকে পিতামাতার নিয়ামক অ্যাক্সেস করতে চান তবে আপনাকে এই জাতীয় কিছু করতে হবে:

<div ng-controller="xyzController as vm">
   {{$parent.property}}
</div>

জেএসফিডেল দেখুন: http://jsfiddle.net/2r728/

হালনাগাদ

আসলে যেহেতু আপনি citiesপ্যারেন্ট কন্ট্রোলারে সংজ্ঞায়িত হয়েছেন তাই আপনার শিশু নিয়ামক সমস্ত স্কোপ ভেরিয়েবলের উত্তরাধিকারী হবে। সুতরাং তাত্ত্বিকভাবে আপনাকে কল করতে হবে না $parent। উপরের উদাহরণটিও নীচে লেখা যেতে পারে:

function ParentCtrl($scope) {
    $scope.cities = ["NY","Amsterdam","Barcelona"];
}

function ChildCtrl($scope) {
    $scope.parentCities = $scope.cities;
}

AngularJS ডক্স এই পদ্ধতির ব্যবহার করে, এখানে আপনি সম্পর্কে আরও পড়তে পারেন $scope।

আরেকটি আপডেট

আমি মনে করি এটি মূল পোস্টারের আরও ভাল উত্তর।

এইচটিএমএল

<div ng-app ng-controller="ParentCtrl as pc">
    <div ng-controller="ChildCtrl as cc">
        <pre>{{cc.parentCities | json}}</pre>
        <pre>{{pc.cities | json}}</pre>
    </div>
</div>

জাতীয়

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}

function ChildCtrl() {
    var vm = this;
    ParentCtrl.apply(vm, arguments); // Inherit parent control

    vm.parentCities = vm.cities;
}

আপনি যদি controller asপদ্ধতিটি ব্যবহার করেন তবে আপনি নীচের হিসাবে পিতামাতাদের স্কোপ অ্যাক্সেস করতে পারেন

function ChildCtrl($scope) {
    var vm = this;
    vm.parentCities = $scope.pc.cities; // note pc is a reference to the "ParentCtrl as pc"
}

আপনি দেখতে পাচ্ছেন অ্যাক্সেস করার বিভিন্ন উপায় রয়েছে $scopes।

আপডেট

function ParentCtrl() {
    var vm = this;
    vm.cities = ["NY", "Amsterdam", "Barcelona"];
}
    
function ChildCtrl($scope) {
    var vm = this;
    ParentCtrl.apply(vm, arguments);
    
    vm.parentCitiesByScope = $scope.pc.cities;
    vm.parentCities = vm.cities;
}
    

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script>
<div ng-app ng-controller="ParentCtrl as pc">
  <div ng-controller="ChildCtrl as cc">
    <pre>{{cc.parentCities | json}}</pre>
    <pre>{{cc.parentCitiesByScope | json }}</pre>
    <pre>{{pc.cities | json}}</pre>
  </div>
</div>

Comments

আমি মনে করি আপনার শেষ আপডেটের সাথে দুটি বিষয় হ'ল প্যারেন্ট স্কোপটি উত্তীর্ণ করাতে সম্ভাব্য নাম স্থানের দ্বন্দ্ব থাকতে পারে এবং ২. জ্ঞানের প্রয়োজন যা প্যারেন্ট কন্ট্রোলার ওরফে 'পিসি'। এটি পুনরায় ব্যবহার আরও কঠিন করে তোলে।

— tchen

আপনি কন্ট্রোলারদের ক্রিয়াকলাপ CtrlName (...) as as হিসাবে সংজ্ঞায়িত করেছেন তবে আমরা কৌনিক নামকরণ ব্যবহার করে এটি কীভাবে অর্জন করতে পারি? লাইক: কৌণিক.মুডুল (এমডিএলনেম) .কন্ট্রোলার (CtrlName, ফাংশন (...) {});

— পেড্রো জাস্টো

আপনি কি বোঝাতে চেয়েছেন? একটি নিয়ামক কেবল একটি ফাংশন? যেমনangular.module('app').controller('ParentCtrl', ParentCtrl);

— ডাইটারগ

দুঃখিত, আপনি ঠিক বলেছেন! 'নিয়ন্ত্রক হিসাবে' পদ্ধতিতে, '$ সুযোগ.pc.cities' ব্যবহার করে; পিতামাতার শহরগুলি অ্যাক্সেস করা আমার কাছে 'পিছনে পিছনে' বলে মনে হচ্ছে কারণ চাইল্ডসিটিআরএলে যদি আমাদের 'শহরগুলি' সম্পত্তি না থাকে তবে এটি পিতামাতার শহরগুলিতে অটো অ্যাক্সেস করবে। এই সমস্যা সমাধানের আর কোন উপায় নেই?

— পেড্রো জাস্টো

এটি JavaScriptদেখুন: ডেভেলপার.মোজিলা.আর.ইন-

— ইউএস

Answer 2

আমি সবেমাত্র চেক করেছি

$scope.$parent.someProperty

আমার জন্য কাজ কর.

এবং এটি হবে

{{$parent.someProperty}}

দেখার জন্য।

Comments

হুম, আমার জন্য কাজ করছে না। ভাবনা যদি এটির সাথে ভিএম সিন্ট্যাক্স হিসাবে নিয়ামকের সাথে করতে হয়।

— zpydee

যদি আপনি প্যারেন্ট কন্ট্রোলারের নাম রেখেছেন তবে আপনি template {vm.someProperty} template টেমপ্লেটে $ পিতামাতাকে ফেলে রাখবেন

— এপ্রিলকে সলব করবে

Answer 3

আপনি যখন asসিনট্যাক্স ব্যবহার করেন , যেমন ParentController as parentCtrlএকটি নিয়ামককে সংজ্ঞায়িত করতে চান তবে চাইল্ড কন্ট্রোলারের ক্ষেত্রে প্যারেন্ট স্কোপ ভেরিয়েবল অ্যাক্সেস করতে নিম্নলিখিত:

var id = $scope.parentCtrl.id;

সিনট্যাক্স parentCtrlব্যবহার করে প্যারেন্ট কন্ট্রোলারের নাম কোথায় এবং একই নিয়ামক হিসাবে সংজ্ঞায়িত একটি পরিবর্তনীয়।asid

Answer 4

কিছু সময় আপনার সরাসরি সন্তানের ক্ষেত্রের মধ্যে প্যারেন্ট বৈশিষ্ট্যগুলি আপডেট করতে হতে পারে। উদাহরণস্বরূপ শিশু নিয়ামকের পরিবর্তনের পরে পিতামাতার নিয়ন্ত্রণের একটি তারিখ এবং সময় সংরক্ষণ করা দরকার। উদাহরণস্বরূপ জেএসফিডেলে কোড

এইচটিএমএল

<div ng-app>
<div ng-controller="Parent">
    event.date = {{event.date}} <br/>
    event.time = {{event.time}} <br/>
    <div ng-controller="Child">
        event.date = {{event.date}}<br/>
        event.time = {{event.time}}<br/>
        <br>
        event.date: <input ng-model='event.date'><br>
        event.time: <input ng-model='event.time'><br>
    </div>
</div>

জাতীয়

    function Parent($scope) {
       $scope.event = {
        date: '2014/01/1',
        time: '10:01 AM'
       }
    }

    function Child($scope) {

    }

Answer 5

আপনি সুযোগের উত্তরাধিকারকেও হ্রাস করতে পারেন এবং "গ্লোবাল" স্কোপগুলিতে জিনিস সঞ্চয় করতে পারেন।

আপনার অ্যাপ্লিকেশনটিতে যদি কোনও প্রধান নিয়ামক থাকে যা অন্যান্য সমস্ত নিয়ামককে আবৃত করে রাখে তবে আপনি বিশ্বব্যাপী একটি "হুক" ইনস্টল করতে পারেন:

function RootCtrl($scope) {
    $scope.root = $scope;
}

তারপরে যে কোনও শিশু নিয়ামক হিসাবে আপনি "গ্লোবাল" স্কোপ দিয়ে প্রবেশ করতে পারেন $scope.root। আপনি এখানে যা কিছু সেট করেছেন তা বিশ্বব্যাপী দৃশ্যমান হবে।

উদাহরণ:

function RootCtrl($scope) {
  $scope.root = $scope;
}

function ChildCtrl($scope) {
  $scope.setValue = function() {
    $scope.root.someGlobalVar = 'someVal';
  }
}

function OtherChildCtrl($scope) {
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="RootCtrl">
  
  <p ng-controller="ChildCtrl">
    <button ng-click="setValue()">Set someGlobalVar</button>
  </p>
  
  <p ng-controller="OtherChildCtrl">
    someGlobalVar value: {{someGlobalVar}}
  </p>

</div>

Comments

এটি আসলে স্কেল করে না। এটি গ্লোবাল ভেরিয়েবলগুলি সংজ্ঞায়িত করার মতো যা অনেকগুলি ফাইল / প্রসঙ্গের মধ্যে অনন্য হতে হবে।

— ZachB

আমি কোনও স্কেলিংয়ের সমস্যাটি দেখতে পাচ্ছি না তবে স্কোপকে 'রুট' ব্যতীত অন্য কিছুকে কল করা অন্য প্রসঙ্গে ভাল হতে পারে

— নিকো ওয়েস্টারডেল

যে উপাদানটি প্রয়োজন তার উপ-গাছের জীবনকালের চেয়ে দীর্ঘ সময়ের জন্য স্থির থাকাও এটিকে কিছুটা উপদ্রব বলে মনে হচ্ছে।

— রোবপ্রোগ

Answer 6

আমি বিশ্বাস করি সম্প্রতি আমার একই ধরণের ঘটনা ছিল

function parentCtrl() {
   var pc = this; // pc stands for parent control
   pc.foobar = 'SomeVal';
}

function childCtrl($scope) {

   // now how do I get the parent control 'foobar' variable?
   // I used $scope.$parent

   var parentFoobarVariableValue = $scope.$parent.pc.foobar;

   // that did it
}

আমার সেটআপটি কিছুটা আলাদা ছিল তবে একই জিনিসটি সম্ভবত এখনও কাজ করা উচিত

Answer 7

একটি শিশু উপাদান থেকে আপনি 'প্রয়োজনীয়তা' সহ পিতামাতার উপাদানগুলির বৈশিষ্ট্য এবং পদ্ধতিগুলি অ্যাক্সেস করতে পারেন। এখানে একটি উদাহরণ:

মূল:

.component('myParent', mymodule.MyParentComponent)
...
controllerAs: 'vm',
...
var vm = this;
vm.parentProperty = 'hello from parent';

শিশুঃ

require: {
    myParentCtrl: '^myParent'
},
controllerAs: 'vm',
...
var vm = this;
vm.myParentCtrl.parentProperty = 'hello from child';

Answer 8

খুব সহজ এবং কাজ করে, তবে কেন নিশ্চিত নয় ...

angular.module('testing')
  .directive('details', function () {
        return {
              templateUrl: 'components/details.template.html',
              restrict: 'E',                 
              controller: function ($scope) {
                    $scope.details=$scope.details;  <=== can see the parent details doing this                     
              }
        };
  });

Answer 9

সম্ভবত এটি খোঁড়া কিন্তু আপনি কেবল তাদের উভয়কেই কোনও বাহ্যিক বস্তুর দিকে নির্দেশ করতে পারেন:

var cities = [];

function ParentCtrl() {
    var vm = this;
    vm.cities = cities;
    vm.cities[0] = 'Oakland';
}

function ChildCtrl($scope) {
    var vm = this;
    vm.cities = cities;
}

এখানে সুবিধাটি হ'ল চাইল্ডসিআরটিএল সম্পাদনাগুলি এখন পিতামাতার ডেটাতে ফিরে প্রস্তাব দেয়।

Comments

বৈশ্বিক ভেরিয়েবলগুলি প্রবর্তন করা বিপজ্জনক।

— ডেমেন্টিক