تحديث قيم Angular بشكل تلقائي مع Two-Way Data Binding
في هذا السياق، يواجه المطور تحديًا في تحديث قيمة المتغير reg.message عندما يتغير المتغير reg.fname في Angular. يتطلب الأمر فهم عميق لكيفية عمل Angular وكيفية التعامل مع نطاقات العرض (scope). دعونا نستكشف السبب والحلول الممكنة لهذه المشكلة.
أولًا، يبدو أن هناك خللًا في الشيفرة المرفقة. عندما تستخدم this.$apply داخل وحدة تحكم (controller)، فإن this يشير إلى الكائن الخاص بالوحدة التحكم، وليس إلى النطاق الرئيسي (scope). هذا هو السبب في حدوث الخطأ وظهور {{reg.message}} بدلاً من تحديث النص في الصفحة.
لحل هذه المشكلة، يمكن استخدام متغير مؤقت للإشارة إلى الكائن الذي يشير إليه this داخل دالة apply. إليك كيف يمكن تحسين الشيفرة:
html<script>
var app = angular.module('ant101App', []);
app.controller('regFormController', function() {
var self = this; // استخدام متغير مؤقت للإشارة إلى الكائن الصحيح
self.message = null;
$scope.$watch('reg.fname', function(newVal, oldVal) {
if (('' + newVal).length > 15) {
self.message = 'First name should be less than 16 characters!';
} else {
self.message = null;
}
});
});
script>
في هذا المثال، تم استخدام $watch لمراقبة تغييرات في reg.fname. عندما يتغير القيمة، يتم تحديث self.message وفقًا للشروط المحددة. يتجنب هذا النهج الحاجة إلى استخدام apply بشكل صريح، ويضمن تحديث النطاق بشكل صحيح.
المزيد من المعلومات
بالطبع، دعونا نوسع المناقشة لفهم أفضل حول كيفية تفاعل Angular مع نطاقات العرض وكيف يمكن تحسين الشيفرة لتحقيق أداء أفضل وتجنب المشاكل المحتملة.
في Angular، يُفضل استخدام الـ Two-Way Data Binding لضمان تحديث التطبيق تلقائيًا عند حدوث تغييرات في المتغيرات. في هذا السياق، يمكنك استخدام ng-model لتحقيق ذلك بشكل أفضل. تمكنك هذه الطريقة من الربط المتزامن بين النموذج والعرض بحيث يتم تحديث النموذج عندما يتغير العرض، والعكس صحيح.
اليك كيف يمكن تحسين الكود:
html<html lang="en" ng-app="ant101App" ng-controller="regFormController as reg">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">script>
<script>
var app = angular.module('ant101App', []);
app.controller('regFormController', function($scope) {
$scope.reg = {
fname: '',
message: null
};
$scope.$watch('reg.fname', function(newVal, oldVal) {
if (('' + newVal).length > 15) {
$scope.reg.message = 'First name should be less than 16 characters!';
} else {
$scope.reg.message = null;
}
});
});
script>
head>
<body>
<p>{{reg.message}}p>
<input ng-model="reg.fname" type="text" name="firstname" class="afirst-name-box" placeholder="First name" required>
body>
html>
في هذا المثال، تم إنشاء متغير reg في النطاق الرئيسي باستخدام $scope، وتم استخدام ng-model لربط الإدخال بالمتغير reg.fname. يقوم $watch بمراقبة تغييرات في reg.fname وتحديث reg.message وفقًا للشروط.
هذا النهج يعزز فهمًا أعمق لتفاعل Angular مع نطاقات العرض ويوفر رمزًا أكثر وضوحًا وبساطة، مما يجعل صيانة التطبيق أكثر يسرًا وفهمًا.
