অ্যাঙ্গুলারজেএস ব্যবহার করে আমি কীভাবে ব্রাউজারের কনসোলে $ স্কোপ ভেরিয়েবল অ্যাক্সেস করব?

Question

আমি $scopeক্রোমের জাভাস্ক্রিপ্ট কনসোলে আমার পরিবর্তনশীলটি অ্যাক্সেস করতে চাই । আমি কেমন করে ঐটি করি?

ভেরিয়েবল হিসাবে আমি কনসোলে $scopeআমার মডিউলটির নাম দেখতে বা দেখতে পাচ্ছি না myapp।

Comments

ডিবাগিংয়ের জন্য আমি সাধারণত window.MY_SCOPE = $scope;আমার কন্ট্রোলার ফাংশনে প্রথম জিনিসটি সেট করি।

— জেসন গোয়েমাট

আপনি যদি ফায়ারফক্সের বিকাশ / পরীক্ষার কথা বিবেচনা করছেন, আপনি অ্যাংস্কোপও ব্যবহার করতে পারেন , এটি একটি ছোট এক্সটেনশন যা $scopeনির্বাচিত ডিওএম উপাদানগুলির বস্তুগুলিকে ফায়ারবগের ডিওএম ইন্সপেক্টরটিতে প্রদর্শন করে।

— কোস প্রো

@ জেসনগোম্যাট কেন উইন্ডো ব্যবহার করবেন না $ সুযোগ = $ সুযোগ; যাতে আপনি কেবল এমওয়াইএসসিপিই-র পরিবর্তে $ স্কোপটি ব্যবহার করতে পারেন - আমি কোনও সমস্যা লক্ষ্য করিনি তবে সম্ভবত আমি কোনও সুরক্ষা উদ্বেগ বা কিছু মিস করছি।

— জেমস জেনেটস

কেবল স্পষ্টতার জন্য, কৌণিকের নতুন কেউ বিভ্রান্ত হয়ে পড়তে পারে এবং মনে করতে পারে যে the সুযোগটি কনসোলটিতে জাদুকরভাবে উপলভ্য ছিল যদি স্রেফ যদি দেখেন যে সেভাবে সেভাবে ব্যবহৃত হচ্ছে। এছাড়াও যদি আপনি ভুল করে নির্দেশের ঘোষণায় স্কোপ এবং কোডের code সুযোগ উদাহরণস্বরূপ ব্যবহার করেন তবে আপনি ত্রুটি পাওয়ার পরিবর্তে উইন্ডো অবজেক্টে এটি ব্যবহার করবেন।

— জেসন গোয়েমাট

Answer 1

বিকাশকারী সরঞ্জামগুলির এইচটিএমএল প্যানেলে একটি উপাদান চয়ন করুন এবং কনসোলে এটি টাইপ করুন:

angular.element($0).scope()

ইন ওয়েবকিট এবং ফায়ারফক্স, $0উপাদান ট্যাবে নির্বাচিত DOM নোড একটি রেফারেন্স, তাই এই করে আপনার নির্বাচিত DOM নোড সুযোগ কনসোলে প্রিন্ট আউট পাবেন।

আপনি এলিমেন্ট আইডি দ্বারাও স্কোপটিকে লক্ষ্য করতে পারেন:

angular.element(document.getElementById('yourElementId')).scope()

অ্যাডঅনস / এক্সটেনশানগুলি

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

• বাটারং । এই প্রায় কিছুদিন হয়েছে।

• এনজি-ইন্সপেক্টর । এটি সর্বাধিক নতুন এবং নাম হিসাবে বোঝা যায় এটি আপনাকে আপনার অ্যাপ্লিকেশনটির স্কোপগুলি পরিদর্শন করতে দেয়।

জেফিডাল নিয়ে খেলছে

Jsfiddle এর সাথে কাজ করার সময় আপনি URL এর শেষে যুক্ত করে শো মোডে ফিটল খুলতে পারেন /show। এভাবে চলতে চলতে আপনার angularগ্লোবাল অ্যাক্সেস থাকতে পারে । আপনি এটি এখানে চেষ্টা করতে পারেন:

http://jsfiddle.net/jaimem/Yatbt/show

jQuery হালকা

আপনি যদি AngularJS এর ​​আগে jQuery লোড করেন তবে angular.elementএকটি jQuery নির্বাচক পাস হতে পারে। সুতরাং আপনি একটি নিয়ামক এর সুযোগ পরিদর্শন করতে পারে

angular.element('[ng-controller=ctrl]').scope()

একটি বোতাম

 angular.element('button:eq(1)').scope()

... ইত্যাদি।

আপনি সম্ভবত এটি আরও সহজ করতে বিশ্বব্যাপী ফাংশনটি ব্যবহার করতে চাইতে পারেন:

window.SC = function(selector){
    return angular.element(selector).scope();
};

এখন আপনি এটি করতে পারে

SC('button:eq(10)')
SC('button:eq(10)').row   // -> value of scope.row

এখানে চেক করুন: http://jsfiddle.net/jaimem/DvRaR/1/show/

Comments

ধন্যবাদ। আমি যখন বাটারং ইনস্টল করার চেষ্টা করি তখন এটি আমাকে বলে যে আপনার কম্পিউটার সমর্থিত নয়, আমার উবুন্টু আছে, কোনও ধারণা?

— মুর্তজা

@ জেএম- হিসাবে angular.element($0).scope(), আপনি কিছু পদ্ধতি কল করার চেষ্টা না করা পর্যন্ত এটি কাজ করে। আমি চেষ্টা করেছি, এবং কোনও কারণে এই সেটআপে কোনও HTTP অনুরোধ সম্ভব নয়?

— krtek

মনে রাখবেন যে আপনি ডিবাগ তথ্যটি অক্ষম করলে আপনি সর্বদা এই পদ্ধতিটি ব্যবহার করে অপরিজ্ঞাত হয়ে যাবেন। এই উদ্দেশ্যে এবং দ্বারা প্রতিরোধ করা যায় .. .well, $ compileProvider উপর ডিবাগ তথ্য নিষ্ক্রিয় না

— Robba

কৌণিক.এলিমেন্টের ($ 0) .স্কোপ (): আপনি $ ($ 0) .স্কোপ ()

— ব্যবহারকারী 2954463

@ জাইমকে উল্লেখ করা উচিত যে যখন কোনও উপাদানটির কার্য সম্পাদনের জন্য এটি বন্ধ করা হয় তখন কীভাবে পুনরায় সক্ষম হওয়া যায় to

— enorl76

Answer 2

জেএম এর উত্তরে উন্নতি করতে ...

// Access whole scope
angular.element(myDomElement).scope();

// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);

// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();

অথবা আপনি jQuery ব্যবহার করছেন, এটি একই জিনিস ...

$('#elementId').scope();
$('#elementId').scope().$apply();

কনসোল থেকে একটি ডিওএম উপাদান অ্যাক্সেস করার আরও সহজ উপায় (যেমন জেএম উল্লেখ করা হয়েছে) এটি 'উপাদানসমূহ' ট্যাবে ক্লিক করুন এবং এটি স্বয়ংক্রিয়ভাবে সংরক্ষণ হয়ে যায় $0।

angular.element($0).scope();

Comments

কৌণিকটিতে jquery এর একটি উপসেট রয়েছে, সুতরাং আপনি সর্বদা পরবর্তী বাক্য গঠন ব্যবহার করতে পারেন (যদি এটি সঠিক হয়) তবে আমি নিশ্চিত নই যে এটি

— পিজজাইওলা গর্জনজোলা

আমি শেষ করে দিয়েছি angular.element(document.body).scope(), আপনাকে ধন্যবাদ!

— অ্যালেক্স সোরোকোলেটোভ

Answer 3

আপনি যদি বাটারং ইনস্টল করেছেন

তারপরে আপনি কেবল লিখতে পারেন:

$scope

আপনি যখন উপাদানটি ক্রোমে থাকা উপাদানগুলিতে নির্বাচিত হন তখন। রেফ - https://github.com/angular/angularjs-batarang#console

Answer 4

এটি বাটারং ছাড়াই সুযোগ পাওয়ার এক উপায়, আপনি এটি করতে পারেন:

var scope = angular.element('#selectorId').scope();

বা আপনি যদি নিয়ামকের নামে নিজের সুযোগটি খুঁজতে চান তবে এটি করুন:

var scope = angular.element('[ng-controller=myController]').scope();

আপনি আপনার মডেলটিতে পরিবর্তনগুলি করার পরে, আপনাকে ডামে পরিবর্তনগুলি কল করে আবেদন করতে হবে:

scope.$apply();

Comments

এই উত্তরটিতে এতগুলি উপার্জন কীভাবে হবে? এর জন্য আপনার jQuery দরকার নেই! angular.elementইতিমধ্যে একটি উপাদান নির্বাচন পদ্ধতি। আপনার আইডি দ্বারা কোনও উপাদান নির্বাচন

— কিয়োটিক

আমি আপনাকে বলিনি যে এটি প্রয়োজন। আমি যা বলছি তা যদি আপনার কাছে ইতিমধ্যে এটি থাকে তবে আপনি এটি এটি ব্যবহার করতে পারেন।

— সাহসী নিউমথ

angular.element আপনি যে জন্য jQuery ব্যবহার করছেন তা ইতিমধ্যে কাজটি করে does প্রকৃতপক্ষে, jQuery উপলভ্য থাকলে jQuery এর angular.elementএকটি নাম। আপনি অযথা আপনার কোড জটিল করছেন। angular.element('#selectorId')এবং angular.element('[ng-controller=myController]')শুধুমাত্র কম কোড সহ একই জিনিস করুন with আপনি পাশাপাশি কল করতে পারেনangular.element('#selectorId'.toString())

— কায়োটিক

@ টায়ারিয়াস, আপনার মতামত কম অভিযুক্ত এবং রাগান্বিত হতে পারে এবং আরও বেশি পেশাদার হতে পারে?

— তাস

@ তাস আপনি ঠিক বলেছেন, আমি অযথা অভদ্র ছিলাম। আমি ক্ষমা প্রার্থনা করছি. একই কথা দু'বার করা হচ্ছে বলে যথেষ্ট।

— কিয়োটিক

Answer 5

আপনার নিয়ামকের কোথাও (প্রায়শই শেষ লাইনটি একটি ভাল জায়গা) থাকে put

console.log($scope);

আপনি যদি কোনও অভ্যন্তরীণ / অন্তর্নিহিত সুযোগ দেখতে চান তবে এনজি-রিপিটের ভিতরে বলুন, এরকম কিছু কাজ করবে।

<li ng-repeat="item in items">
   ...
   <a ng-click="showScope($event)">show scope</a>
</li>

তারপরে আপনার নিয়ামকের মধ্যে

function MyCtrl($scope) {
    ...
    $scope.showScope = function(e) {
        console.log(angular.element(e.srcElement).scope());
    }
}

নোট করুন যে উপরে আমরা প্যারেন্ট স্কোপে শোস্কোপ () ফাংশনটি সংজ্ঞায়িত করি তবে এটি ঠিক আছে ... শিশু / অভ্যন্তরীণ / অন্তর্নিহিত সুযোগটি সেই ফাংশনটিতে অ্যাক্সেস করতে পারে, যা ঘটনার উপর ভিত্তি করে স্কোপটি প্রিন্ট করে এবং তাই এর সাথে যুক্ত স্কোপটি উপাদানটি যে ঘটনাটিকে বহিস্কার করেছে

@ জেএম-এর পরামর্শটিও কার্যকর, তবে আমি মনে করি এটি জেএসফিডেলের অভ্যন্তরে কাজ করে না। আমি ক্রোমের অভ্যন্তরে jsFizz এ এই ত্রুটিটি পেয়েছি:

> angular.element($0).scope()
ReferenceError: angular is not defined

Answer 6

এর মধ্যে অনেকগুলি উত্তরের জন্য একটি সতর্কতা: আপনি যদি আপনার নিয়ামককে উপন্যাস করেন তবে আপনার স্কোপ অবজেক্টগুলি যে কোনও থেকে ফিরে আসা অবজেক্টের মধ্যে থাকবে scope()।

উদাহরণস্বরূপ, যদি আপনার নিয়ামক নির্দেশিকাটি এমনভাবে তৈরি করা হয়: <div ng-controller="FormController as frm"> তবে startDateআপনার নিয়ামকের কোনও সম্পত্তি অ্যাক্সেস করার জন্য , আপনি কল করবেনangular.element($0).scope().frm.startDate

Comments

কন্ট্রোলার হয় একটি সম্পত্তি হিসাবে (কনসোলে অত: পর) দেখতে অ্যাক্সেসযোগ্য $scopeনাম $ctrlডিফল্টরূপে, কিনা আপনি এটি ব্যবহার নামান্তর স্বাধীনভাবে controllerAsবা না। বিদ্যমান উত্তরগুলিতে আপনি কোথায় "সতর্কতা" দেখেছেন তা আমি বুঝতে পারি না । নোট করুন এখানে বেশিরভাগ উত্তরগুলি সরবরাহ করা হয়েছিল যখন controllerAsকোনও সাধারণ অনুশীলন ছিল না।

— তাও

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

— মাইকেল ব্ল্যাকবার্ন

Answer 7

আমি সম্মত হই যে সেরাটি বাটারং এর সাথে $scopeকোনও বিষয় নির্বাচন করার পরে রয়েছে (এটি angular.element($0).scope()jQuery এর মতো বা তার চেয়ে ছোট $($0).scope()) : (আমার প্রিয়))

এছাড়াও, আমার মতো যদি আপনার bodyউপাদানটির মূল সুযোগ থাকে তবে একটি দুর্দান্ত $('body').scope()কাজ করে works

Answer 8

অন্যান্য উত্তরগুলি যুক্ত করতে এবং বাড়ানোর জন্য, কনসোলে, $($0)উপাদানটি পেতে প্রবেশ করান । যদি এটি অ্যাংুলারজ অ্যাপ্লিকেশন হয় তবে একটি jQuery লাইট সংস্করণ ডিফল্টরূপে লোড হবে।

আপনি যদি jQuery ব্যবহার না করে থাকেন তবে আপনি এখানে হিসাবে কৌণিক.এলিমেন্ট ($ 0) ব্যবহার করতে পারেন:

angular.element($0).scope()

আপনার কাছে jQuery এবং সংস্করণ রয়েছে কিনা তা পরীক্ষা করতে কনসোলে এই কমান্ডটি চালান:

$.fn.jquery

আপনি যদি কোনও উপাদানটি পরীক্ষা করে থাকেন তবে বর্তমানে নির্বাচিত উপাদানটি কমান্ড লাইন API রেফারেন্স। 0 এর মাধ্যমে পাওয়া যায়। ফায়ারব্যাগ এবং ক্রোম উভয়েরই এই উল্লেখ রয়েছে।

তবে, ক্রোম বিকাশকারী সরঞ্জামগুলি এই উল্লেখগুলি ব্যবহার করে $ 0, $ 1, $ 2, $ 3,। 4 নামের বৈশিষ্ট্যগুলির মাধ্যমে নির্বাচিত সর্বশেষ পাঁচটি উপাদান (বা হিপ অবজেক্টস) সরবরাহ করবে। সর্বাধিক নির্বাচিত উপাদান বা অবজেক্টটি $ 0 হিসাবে উল্লেখ করা যেতে পারে, দ্বিতীয় অতি সাম্প্রতিক $ 1 এবং আরও হিসাবে।

ফায়ারব্যাগের জন্য এখানে কমান্ড লাইন এপিআই রেফারেন্স রয়েছে যা এর উল্লেখগুলি তালিকাভুক্ত করে।

$($0).scope()উপাদানটির সাথে যুক্ত সুযোগটি ফিরিয়ে দেবে। আপনি এখনই এর বৈশিষ্ট্যগুলি দেখতে পাবেন।

আপনি ব্যবহার করতে পারেন এমন আরও কিছু জিনিস হ'ল:

• একটি উপাদান পিতামাতার সুযোগ দেখুন:

$($0).scope().$parent।

• আপনি এটি চেইন করতে পারেন:

$($0).scope().$parent.$parent

• আপনি মূল স্কোপটি দেখতে পারেন:

$($0).scope().$root

• আপনি যদি বিচ্ছিন্ন সুযোগের সাথে কোনও নির্দেশকে হাইলাইট করেন তবে আপনি এটির সাথে এটি দেখতে পারেন:

$($0).isolateScope()

দেখুন ডিবাগ অপরিচিত Angularjs কোড জন্য টিপস এবং ট্রিকস আরো বিস্তারিত জানার এবং উদাহরণ জন্য।

Answer 9

উপাদানটি পরীক্ষা করুন, তারপরে কনসোলে এটি ব্যবহার করুন

s = $($0).scope()
// `s` is the scope object if it exists

Answer 10

কেবল $scopeএকটি বৈশ্বিক চলক হিসাবে বরাদ্দ করুন । সমস্যা সমাধান.

app.controller('myCtrl', ['$scope', '$http', function($scope, $http) {
    window.$scope = $scope;
}

$scopeউত্পাদনের তুলনায় আমাদের আসলে বেশি সময় বিকাশ প্রয়োজন development

@ জেসনগোম্যাট দ্বারা ইতিমধ্যে উল্লেখ করা হয়েছে তবে এটিকে এই প্রশ্নের উপযুক্ত উত্তর হিসাবে যুক্ত করেছেন।

Answer 11

আমি angular.element($(".ng-scope")).scope();অতীতে ব্যবহার করেছি এবং এটি দুর্দান্ত কাজ করে। পৃষ্ঠায় কেবলমাত্র একটি অ্যাপের সুযোগ থাকলেই আপনি ভাল বা আপনি এর মতো কিছু করতে পারেন:

angular.element($("div[ng-controller=controllerName]")).scope(); অথবা angular.element(document.getElementsByClassName("ng-scope")).scope();

Answer 12

আমি সাধারণত এর জন্য jQuery ডেটা () ফাংশন ব্যবহার করি:

$($0).data().$scope

ক্রোম ডিওএম পরিদর্শকের মধ্যে বর্তমানে। 0 টি আইটেমটি নির্বাচিত হয়েছে। $ 1, $ 2 .. এবং আরও পূর্বের নির্বাচিত আইটেমগুলি।

Answer 13

বলুন যে আপনি এর মতো উপাদানের সুযোগটি অ্যাক্সেস করতে চান

<div ng-controller="hw"></div>

কনসোলে আপনি নিম্নলিখিতটি ব্যবহার করতে পারেন:

angular.element(document.querySelector('[ng-controller=hw]')).scope();

এটি আপনাকে সেই উপাদানটিতে সুযোগ দেবে।

Comments

আমাদের এখানে "ডকুমেন্ট.কোয়্যার

— সিলেক্টর

Answer 14

Chrome এর কনসোলে:

 1. Select the **Elements** tab
 2. Select the element of your angular's scope. For instance, click on an element <ui-view>, or <div>, or etc.
 3. Type the command **angular.element($0).scope()** with following variable in the angular's scope

উদাহরণ

angular.element($0).scope().a
angular.element($0).scope().b

ক্রোমের কনসোল

Answer 15

এর জন্য jQuery পাশাপাশি ইনস্টল করা প্রয়োজন তবে এটি একটি পরিবেশ পরিবেশের জন্য পুরোপুরি কাজ করে works এটি স্কোপগুলির উদাহরণ পেতে প্রতিটি উপাদানের মাধ্যমে দেখায় তারপরে সেখানে নিয়ামকের নামের সাথে তাদের লেবেলযুক্ত ফিরিয়ে দেয়। এটি কোনও সম্পত্তি মুছে ফেলতেও শুরু করে $ যা এঙ্গুলারগুলি সাধারণত এটির কনফিগারেশনের জন্য ব্যবহার করে।

let controllers = (extensive = false) => {
            let result = {};
            $('*').each((i, e) => {
                let scope = angular.element(e).scope();
                if(Object.prototype.toString.call(scope) === '[object Object]' && e.hasAttribute('ng-controller')) {
                    let slimScope = {};
                    for(let key in scope) {
                        if(key.indexOf('$') !== 0 && key !== 'constructor' || extensive) {
                            slimScope[key] = scope[key];
                        }
                    }
                    result[$(e).attr('ng-controller')] = slimScope;
                }
            });

            return result;
        }

Answer 16

কৌণিকর মধ্যে আমরা কৌণিক.এলিমেন্ট () দ্বারা jquery উপাদান পাই .... সি ...

angular.element().scope();

উদাহরণ:

<div id=""></div>

Answer 17

শুধুমাত্র ডিবাগিং উদ্দেশ্যে আমি এটি নিয়ামকের শুরুতে রেখেছি।

   window.scope = $scope;

  $scope.today = new Date();

এবং এইভাবে আমি এটি ব্যবহার করি।

আমার ডিবাগিং হয়ে গেলে এটি মুছুন।

Answer 18

আপনার কোডের কোথাও $ স্কোপ ভেরিয়েবলের রেফারেন্সের নিকটে একটি ব্রেকপয়েন্ট রাখুন (যাতে 'স্কোপটি বর্তমান' প্লেইন পুরানো জাভাস্ক্রিপ্ট 'স্কোপে থাকে)। তারপরে আপনার কনসোলের $ স্কোপ মানটি পরীক্ষা করতে পারে।

Answer 19

সুযোগের বাইরে কেবল একটি জাভাস্ক্রিপ্ট ভেরিয়েবল সংজ্ঞায়িত করুন এবং এটি আপনার নিয়ামকটিতে আপনার সুযোগে বরাদ্দ করুন:

var myScope;
...
app.controller('myController', function ($scope,log) {
     myScope = $scope;
     ...

এটাই! এটি সমস্ত ব্রাউজারে (কমপক্ষে ক্রোম এবং মজিলায় পরীক্ষিত) কাজ করা উচিত।

এটি কাজ করছে, এবং আমি এই পদ্ধতিটি ব্যবহার করছি।

Comments

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

— পেড্রো অ্যাফোনসো

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

— জিম ডেভিস

@ জিমডাভিস সাধারণভাবে আমি সম্মত, তবে কিছু ক্ষেত্রে এটি করা কার্যকর হয়: অস্থায়ীভাবে উত্সগুলিকে সংশোধন করার মাধ্যমে আপনি কোডটি বার বার ম্যানুয়ালি করার মতো কাজগুলি করতে দিতে পারেন। সুতরাং সমস্যাটি যখন জটিল মনে হচ্ছে এবং ডিবাগিংটি দীর্ঘ সময় নিতে পারে, আমি কোডটি সংশোধন করি। পরিবর্তনগুলি পূর্বাবস্থায়িত করা সঠিক সরঞ্জাম (গিট) এর সাথে তুচ্ছ।

— মার্টিনাস