كيف يمكنني الوصول إلى متغير نطاق $ في وحدة تحكم المستعرض باستخدام AngularJS؟



Answers

لتحسين إجابة jm ...

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

أرغب في الوصول إلى متغير $scope بي في وحدة تحكم JavaScript في Chrome. كيف يمكنني فعل ذلك؟

لا أستطيع أن أرى $scope ولا اسم myapp الوحدة النمطية في وحدة التحكم كمتغيرات.




أحد التحذيرات للعديد من هذه الإجابات: إذا كنت مستعارة جهاز التحكم الخاص بك سوف تكون كائنات النطاق في كائن داخل الكائن الذي تم إرجاعه من scope() .

على سبيل المثال ، إذا تم إنشاء توجيه وحدة التحكم الخاصة بك مثل: <div ng-controller="FormController as frm"> ثم الوصول إلى خاصية startDate التحكم الخاصة بك ، يمكنك استدعاء angular.element($0).scope().frm.startDate




هذه طريقة للوصول إلى نطاق دون Batarang ، يمكنك القيام به:

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

أو إذا كنت تريد العثور على نطاقك حسب اسم وحدة التحكم ، فقم بما يلي:

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

بعد إجراء تغييرات على نموذجك ، ستحتاج إلى تطبيق التغييرات على DOM عن طريق الاتصال بـ:

scope.$apply();



ضع نقطة توقف في التعليمات البرمجية في مكان ما بالقرب من مرجع لمتغير نطاق $ (بحيث يكون نطاق $ في نطاق "جافا سكريبت القديم العادي" الحالي). ثم يمكن فحص قيمة نطاق $ في وحدة التحكم.




ما عليك سوى تحديد متغير جافا سكريبت خارج النطاق وتعيينه لنطاقك في وحدة التحكم الخاصة بك:

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

هذا هو! يجب أن يعمل في جميع المتصفحات (تم اختباره على الأقل في Chrome وموزيلا).

إنها تعمل ، وأنا أستخدم هذه الطريقة.




ما عليك سوى تعيين $scope كمتغير عالمي. تم حل المشكلة.

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

فنحن في الواقع نحتاج إلى $scope أكثر في التطوير منه في الإنتاج.

ذكره بالفعلJasonGoemaat ولكنه أضافه كإجابة مناسبة لهذا السؤال.




لإضافة وتحسين الإجابات الأخرى ، في وحدة التحكم ، أدخل $($0) للحصول على العنصر. إذا كان تطبيق Angularjs ، يتم تحميل إصدار jQuery lite افتراضيًا.

إذا كنت لا تستخدم jQuery ، فيمكنك استخدام angular.element ($ 0) كما في:

angular.element($0).scope()

لمعرفة ما إذا كان لديك jQuery والإصدار ، قم بتشغيل هذا الأمر في وحدة التحكم:

$.fn.jquery

إذا قمت بفحص عنصر ، فإن العنصر المحدد حاليًا متاح عبر مرجع سطر الأوامر API $ 0. يحتوي كل من Firebug و Chrome على هذا المرجع.

ومع ذلك ، فإن أدوات مطوري Chrome ستتيح العناصر الخمسة الأخيرة (أو كائنات كومة الذاكرة المؤقتة) المحددة من خلال الخصائص المسماة $ 0 ، $ 1 ، $ 2 ، $ 3 ، $ 4 باستخدام هذه المراجع. يمكن الإشارة إلى العنصر أو الكائن الذي تم تحديده مؤخرًا باعتباره $ 0 ، والثاني هو أحدث $ 1 وهكذا.

في ما يلي مرجع سطر أوامر واجهة برمجة التطبيقات لـ Firebug الذي يسرد مراجعه .

$($0).scope() سيعود النطاق المرتبط بالعنصر. يمكنك رؤية خصائصه على الفور.

بعض الأشياء الأخرى التي يمكنك استخدامها هي:

  • عرض نطاق العناصر الأصلية:

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

  • يمكنك أيضا سلسلة هذا:

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

  • يمكنك النظر إلى نطاق الجذر:

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

  • إذا حددت تعليمة ذات نطاق عزل ، فيمكنك النظر إليها باستخدام:

$($0).isolateScope()

انظر نصائح وحيل لتصحيح الأخطاء رمز Angularjs غير معروف لمزيد من التفاصيل والأمثلة.




افحص العنصر ، ثم استخدم هذا في وحدة التحكم

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



Links