AngularJS භාවිතා කර බ්‍රව්සරයේ කොන්සෝලයේ $ විෂය පථ විචල්‍යයට ප්‍රවේශ වන්නේ කෙසේද?

$scopeක්‍රෝම් හි ජාවාස්ක්‍රිප්ට් කොන්සෝලය තුළ මගේ විචල්‍යයට ප්‍රවේශ වීමට මම කැමතියි . මම කොහොමද ඒක කරන්නේ?

මට $scopeමගේ මොඩියුලයේ නම myappවිචල්යයන් ලෙස කොන්සෝලය තුළ දැකිය නොහැක .

සංවර්ධක මෙවලම්වල HTML පැනලයේ අංගයක් තෝරාගෙන මෙය කොන්සෝලය තුළ ටයිප් කරන්න:

angular.element($0).scope()

දී WebKit පිරිසැලසුම් හා Firefox, $0ඒ නිසා මෙම කිරීමෙන් ඔබ කොන්සෝලය දී මුද්රණය තෝරාගත් DOM node එකක් මතම ඊට අදාල විෂය පථය ලබා, අංග ටැබය තෝරා DOM node එකක් මතම ඊට අදාල සැඳහුම වේ.

මූලද්‍රව්‍ය හැඳුනුම්පත අනුව ඔබට විෂය පථය ඉලක්ක කළ හැකිය:

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

ඇඩෝන / දිගු

ඔබට පරීක්ෂා කිරීමට අවශ්‍ය විය හැකි ඉතා ප්‍රයෝජනවත් Chrome දිගු කිහිපයක් තිබේ:

• බටරං . මෙය කලක සිට පැවතුනි.

• ng- පරීක්ෂක . මෙය අළුත්ම එක වන අතර, නමට අනුව, එය ඔබගේ යෙදුමේ විෂය පථයන් පරීක්ෂා කිරීමට ඉඩ දෙයි.

JsFiddle සමඟ සෙල්ලම් කිරීම

Jsfiddle සමඟ වැඩ කරන විට ඔබට URL එක අවසානයේ එකතු කිරීමෙන් ප්‍රදර්ශන මාදිලියේ ෆෙඩල් විවෘත කළ හැකිය /show. මේ ආකාරයට ධාවනය වන විට ඔබට angularගෝලීය වෙත ප්‍රවේශය ඇත . ඔබට එය මෙතැනින් උත්සාහ කළ හැකිය:

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

jQuery ලයිට්

ඔබ AngularJS ට පෙර jQuery පූරණය කරන්නේ නම්, angular.elementjQuery තේරීමක් කළ හැකිය. එබැවින් ඔබට පාලකයකුගේ විෂය පථය පරීක්ෂා කළ හැකිය

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/

ජේඑම්ගේ පිළිතුර වැඩිදියුණු කිරීමට ...

// 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();

කොන්සෝලය වෙතින් DOM මූලද්‍රව්‍යයකට ප්‍රවේශ වීමට තවත් පහසු ක්‍රමයක් (jm සඳහන් කළ පරිදි) එය 'මූලද්‍රව්‍ය' පටිත්තෙහි ක්ලික් කිරීම වන අතර එය ස්වයංක්‍රීයව ගබඩා වේ $0.

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

ඔබ බටරං ස්ථාපනය කර ඇත්නම්

එවිට ඔබට ලිවිය හැකිය:

$scope

මූලද්‍රව්‍ය වලින් තෝරාගත් මූලද්‍රව්‍යය ඔබ ක්‍රෝම් වලින් බැලූ විට. Ref - https://github.com/angular/angularjs-batarang#console

මෙය බටරැන්ග් නොමැතිව විෂය පථයට පිවිසීමේ ක්‍රමයකි, ඔබට මෙය කළ හැකිය:

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

නැතහොත් පාලක නාමයෙන් ඔබේ විෂය පථය සොයා ගැනීමට අවශ්‍ය නම් මෙය කරන්න:

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

ඔබ ඔබේ ආකෘතියේ වෙනස්කම් කළ පසු, ඇමතීමෙන් ඔබට DOM වෙත වෙනස්කම් යෙදිය යුතුය:

scope.$apply();

ඔබේ පාලකයේ කොතැනක හෝ (බොහෝ විට අවසාන පේළිය හොඳ තැනක්) තබන්න

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());
    }
}

ඉහත අපි මව් විෂය පථයේ showScope () ශ්‍රිතය අර්ථ දක්වන බව මතක තබා ගන්න, නමුත් එය හරි ... දරුවාට / අභ්‍යන්තර / ව්‍යංග විෂය පථයට එම ශ්‍රිතයට ප්‍රවේශ විය හැකි අතර එමඟින් සිදුවීම මත පදනම්ව විෂය පථය මුද්‍රණය කරයි. සිදුවීම ඉවත් කළ අංගය.

@ jm-'s ගේ යෝජනාව ද ක්‍රියාත්මක වේ, නමුත් එය jsFiddle තුළ ක්‍රියාත්මක වේ යැයි මම නොසිතමි. මට මෙම දෝෂය ක්‍රෝම් තුළ jsFiddle හි ඇත:

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

මෙම පිළිතුරු බොහොමයකට එක් අවවාදයක්: ඔබ ඔබේ පාලකය අන්වර්ථ කළහොත් ඔබේ විෂය පථය ආපසු ලබා දුන් වස්තුව තුළ ඇති වස්තුවක වනු ඇත scope().

උදාහරණයක් ලෙස, ඔබේ පාලක නියෝගය එලෙසම නිර්මාණය කර ඇත්නම්: <div ng-controller="FormController as frm"> එවිට startDateඔබේ පාලකයේ දේපලකට ප්‍රවේශ වීම සඳහා ඔබ අමතන්නangular.element($0).scope().frm.startDate

$scopeවස්තුවක් තෝරාගැනීමෙන් පසු එය සමඟ ඇති හොඳම දේ බව මම එකඟ වෙමි (එය angular.element($0).scope()jQuery සමඟ සමාන හෝ කෙටි වේ: $($0).scope()(මගේ ප්‍රියතම))

එසේම, මා වැනි ඔබට bodyමූලද්‍රව්‍යයේ ප්‍රධාන විෂය පථය තිබේ නම් , එය $('body').scope()හොඳින් ක්‍රියාත්මක වේ.

අනෙක් පිළිතුරු එක් කිරීමට සහ වැඩි දියුණු කිරීමට, කොන්සෝලය තුළ, $($0)මූලද්රව්යය ලබා ගැනීමට ඇතුල් කරන්න. එය Angularjs යෙදුමක් නම්, පෙරනිමියෙන් jQuery ලයිට් අනුවාදයක් පටවනු ලැබේ.

ඔබ jQuery භාවිතා නොකරන්නේ නම්, ඔබට පහත පරිදි angular.element ($ 0) භාවිතා කළ හැකිය:

angular.element($0).scope()

ඔබට jQuery සහ අනුවාදය තිබේදැයි පරීක්ෂා කිරීමට, මෙම විධානය කොන්සෝලය තුළ ක්‍රියාත්මක කරන්න:

$.fn.jquery

ඔබ මූලද්‍රව්‍යයක් පරීක්ෂා කර ඇත්නම්, දැනට තෝරාගෙන ඇති මූලද්‍රව්‍යය විධාන රේඛා API යොමු $ 0 හරහා ලබා ගත හැකිය. ෆයර්බග් සහ ක්‍රෝම් යන දෙකටම මෙම සඳහන තිබේ.

කෙසේ වෙතත්, මෙම යොමු කිරීම් භාවිතා කරමින් $ 0, $ 1, $ 2, $ 3, $ 4 නම් වූ ගුණාංග හරහා තෝරාගත් අවසාන මූලද්‍රව්‍ය පහ (හෝ ගොඩවල් වස්තු) ක්‍රෝම් සංවර්ධක මෙවලම් මඟින් ලබා දෙනු ඇත. වඩාත්ම මෑතකදී තෝරාගත් මූලද්‍රව්‍යය හෝ වස්තුව $ 0 ලෙස ද දෙවනුව $ 1 ලෙස ද සඳහන් කළ හැකිය.

ෆයර්බග් සඳහා වන විධාන රේඛා API යොමු කිරීම එහි යොමු ලැයිස්තුගත කරයි.

$($0).scope()මූලද්‍රව්‍යය හා සම්බන්ධ විෂය පථය නැවත ලබා දෙනු ඇත. ඔබට එහි ගුණාංග එකවරම දැකිය හැකිය.

ඔබට භාවිතා කළ හැකි තවත් දේවල් නම්:

• මව් විෂය පථය බලන්න:

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

• ඔබට මෙය දම්වැල කළ හැකිය:

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

• ඔබට මූල විෂය පථය දෙස බැලිය හැකිය:

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

• හුදකලා විෂය පථයක් සහිත නියෝගයක් ඔබ ඉස්මතු කර ඇත්නම්, ඔබට එය දෙස බැලිය හැක්කේ:

$($0).isolateScope()

වැඩි විස්තර සහ උදාහරණ සඳහා නුහුරු ඇන්ගුලර්ජ් කේතය නිදොස් කිරීම සඳහා උපදෙස් සහ උපක්‍රම බලන්න .

මූලද්රව්යය පරීක්ෂා කරන්න, පසුව මෙය කොන්සෝලය තුළ භාවිතා කරන්න

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

$scopeගෝලීය විචල්‍යයක් ලෙස පවරන්න . ගැටළුව විසඳා ඇත.

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

$scopeනිෂ්පාදනයට වඩා සංවර්ධනයේ දී අපට බොහෝ විට අවශ්‍ය වේ.

@ ජේසන් ගොමාත් විසින් දැනටමත් සඳහන් කර ඇති නමුත් එය මෙම ප්‍රශ්නයට සුදුසු පිළිතුරක් ලෙස එක් කිරීම.

මම angular.element($(".ng-scope")).scope();අතීතයේ භාවිතා කර ඇති අතර එය විශිෂ්ට ලෙස ක්‍රියා කරයි. ඔබට පිටුවේ ඇත්තේ එක් යෙදුම් විෂය පථයක් නම් පමණක් හොඳයි, නැතහොත් ඔබට එවැනි දෙයක් කළ හැකිය:

angular.element($("div[ng-controller=controllerName]")).scope(); හෝ angular.element(document.getElementsByClassName("ng-scope")).scope();

මම සාමාන්‍යයෙන් ඒ සඳහා jQuery දත්ත () ශ්‍රිතය භාවිතා කරමි:

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

$ 0 දැනට ක්‍රෝම් ඩොම් පරීක්ෂක හි තෝරාගත් අයිතමයකි. $ 1, $ 2 .. සහ යනාදිය කලින් තෝරාගත් අයිතම වේ.

වැනි මූලද්‍රව්‍යයේ විෂය පථයට ප්‍රවේශ වීමට ඔබට අවශ්‍ය යැයි පවසන්න

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

ඔබට කොන්සෝලය තුළ පහත සඳහන් දෑ භාවිතා කළ හැකිය:

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

මෙය ඔබට එම මූලද්‍රව්‍යයේ විෂය පථය ලබා දෙනු ඇත.

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

Chrome හි කොන්සෝලය

මේ සඳහා jQuery ද ස්ථාපනය කිරීම අවශ්‍ය වේ, නමුත් dev පරිසරයක් සඳහා පරිපූර්ණව ක්‍රියා කරයි. විෂය පථයන්හි අවස්ථා ලබා ගැනීම සඳහා එය එක් එක් මූලද්‍රව්‍යය හරහා බැලූ විට ඒවා පාලක නම් සමඟ ලේබල් කරයි. එය ඕනෑම දේපල ආරම්භයක් ඉවත් කිරීම with සමඟ ආරම්භ වන අතර එය සාමාන්‍යයෙන් වින්‍යාස කිරීම සඳහා angularjs භාවිතා කරයි.

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;
        }

කෝණික වශයෙන් අපට jquery මූලද්‍රව්‍යය angular.element () මගින් ලබා ගත හැක.

angular.element().scope();

උදාහරණයක්:

<div id=""></div>

නිදොස් කිරීමේ අරමුණු සඳහා පමණක් මම මෙය පාලකයේ ආරම්භයට තැබුවෙමි.

   window.scope = $scope;

  $scope.today = new Date();

මම එය භාවිතා කරන ආකාරය මෙයයි.

මම නිදොස්කරණය කළ පසු එය මකන්න.

Code විෂය පථයේ විචල්‍යයට ආසන්නව කොතැනක හෝ ඔබේ කේතයේ බ්‍රේක්පොයින්ට් එකක් තබන්න (එවිට $ විෂය පථය වර්තමාන 'සරල පැරණි ජාවාස්ක්‍රිප්ට්' විෂය පථයට අයත් වේ). එවිට ඔබට කොන්සෝලයෙහි $ විෂය පථය පරීක්ෂා කළ හැකිය.

ජාවාස්ක්‍රිප්ට් විචල්‍යයක් විෂය පථයෙන් පිටත අර්ථ දක්වා එය ඔබගේ පාලකයේ ඔබේ විෂය පථයට පවරන්න:

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

ඒක තමයි! එය සියලුම බ්‍රව්සර් වල ක්‍රියා කළ යුතුය (අවම වශයෙන් ක්‍රෝම් සහ මොසිල්ලා වලින් පරීක්ෂා කර ඇත).

එය ක්‍රියාත්මක වන අතර මම මෙම ක්‍රමය භාවිතා කරමි.