javascript - since - لا يقوم طراز Ng بتحديث قيمة وحدة التحكم




ng model angular 6 (9)

ربما سؤال سخيف ، ولكن لدي شكل html الخاص بي مع إدخال بسيط وزر:

<input type="text" ng-model="searchText" />
<button ng-click="check()">Check!</button>
{{ searchText }}

ثم في وحدة تحكم (تسمى القالب ووحدة تحكم من routeProvider):

$scope.check = function () {
    console.log($scope.searchText);
}

لماذا أرى تحديث العرض بشكل صحيح ولكن غير محدد في وحدة التحكم عند النقر على الزر؟

شكر!

تحديث: يبدو أني قمت بالفعل بحل هذه المشكلة (قبل أن searchText إلى بعض الحلول) مع: فقط اضطر إلى تغيير اسم الخاصية الخاص بي من searchText إلى search.text ، ثم قم بتعريف $scope.search = {}; كائن في وحدة تحكم و voila ... ليس لديه فكرة لماذا يعمل على الرغم من ؛]


إلقاء نظرة على هذا عزف http://jsfiddle.net/ganarajpr/MSjqL/

لدي (أفترض!) فعلت بالضبط ما كنت تفعله ويبدو أنه يعمل. هل يمكنك التحقق مما لا يعمل هنا من أجلك؟


استخدام this بدلاً من $scope يعمل.

function AppCtrl($scope){
  $scope.searchText = "";
  $scope.check = function () {
    console.log("You typed '" + this.searchText + "'"); // used 'this' instead of $scope
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <div ng-controller="AppCtrl">
    <input ng-model="searchText"/>
    <button ng-click="check()">Write console log</button>
  </div>
</div>

تحرير: في الوقت كتابة هذه الإجابة ، كان الوضع أكثر تعقيداً من هذا. بعد التعليقات ، حاولت إعادة إنتاجها لفهم سبب نجاحها ، ولكن لم يحالفني الحظ. أعتقد بطريقة ما (لا أعرف لماذا حقا) يتم إنشاء نطاق الطفل الجديد this يشير إلى هذا النطاق. ولكن إذا تم استخدام $scope ، فإنه في الواقع يشير إلى نطاق $ الأصل بسبب ميزة النطاق اللغوي لجافا سكريبت.

سيكون من الرائع أن يختبر شخص ما هذه المشكلة بهذه الطريقة ويخبرنا بذلك.


جئت عبر نفس المشكلة عند التعامل مع وجهة نظر غير تافهة (هناك نطاقات متداخلة). واكتشف في النهاية أن هذا أمر شائع عند تطوير تطبيق AngularJS بسبب طبيعة وراثة جافا سكريبت. يتم إنشاء نطاقات AngularJS المتداخلة من خلال هذه الآلية. ويتم وضع القيمة التي يتم إنشاؤها من ng-model في نطاق الأطفال ، ولا يعني أن نطاق الآباء (ربما يكون أحد الحقن في وحدة التحكم) لن يرى القيمة ، ستظل القيمة أيضًا أي خاصية تحمل نفس الاسم في نطاق الأصل إذا لم يتم استخدام النقطة لفرض الوصول المرجعي للنموذج. للحصول على مزيد من التفاصيل ، راجع مقطع الفيديو المخصص عبر الإنترنت لتوضيح هذه المشكلة ، http://egghead.io/video/angularjs-the-dot/ والتعليقات التي تتابعها.


في إتقان تطوير تطبيقات الويب مع كتاب AngularJS p.19 ، هو مكتوب ذلك

تجنب الارتباط المباشر لخصائص النطاق. يُعد ربط البيانات ثنائي الاتجاه لخصائص الكائن (معروضًا على نطاق) أحد الأساليب المفضلة. كقاعدة عامة ، يجب أن يكون لديك نقطة في تعبير يتم تقديمه لتوجيه ng-model (على سبيل المثال ، ng-model = "thing.name").

النطاقات هي مجرد كائنات جافا سكريبت ، وأنها تقلد التسلسل الهرمي دوم. وفقًا لرابط نموذج جافا سكريبت JavaScript ، يتم فصل خصائص النطاقات من خلال النطاقات. لتجنب ذلك ، يجب استخدام الترميز النقطي لربط نماذج ng.


كنت أواجه نفس المشكلة ... القرار الذي عمل بالنسبة لي هو استخدام هذه الكلمة ..........

تنبيه (this.ModelName)؛


لقد تلقيت هذه المشكلة فقط باستخدام root_controller منضمًا إلى عنصر النص الأساسي. ثم كنت باستخدام ng-view مع جهاز التوجيه الزاوي. تكمن المشكلة في أن الزاوي دومًا ينشئ نطاقًا جديدًا عندما يقوم بإدراج html في عنصر عرض ng. ونتيجة لذلك ، تم تعريف وظيفة "التحقق" الخاصة بي على النطاق الرئيسي للنطاق الذي تم تعديله بواسطة عنصر ng-model الخاص بي.

لحل المشكلة ، ما عليك سوى استخدام وحدة تحكم مخصصة ضمن محتوى html الذي تم تحميله بالمسارات.


واجهت نفس المشكلة وكان ذلك بسبب عدم إعلان الكائن الفارغ أولاً في أعلى جهاز التحكم الخاص بي:

$scope.model = {}

<input ng-model="model.firstProperty">

آمل أن يعمل هذا لك!


يمكنك القيام بذلك لتمكين البحث في إدخال ng-keypress لإدخال النص وفي ng-click للرمز:

<input type="text" ng-model="searchText" ng-keypress="keyEnter(this,$event)" />
<button ng-click="check(searchText)">Check!</button>

in the controller
$scope.search = function (searchText) {
        console.log(searchText);
    }
    $scope.keyEnter = function (serachText,$event) {
        var keyCode = $event.which || $event.keyCode;
        if (keyCode === 13) {//KeyCode for Enter key
           console.log(searchText);
        }
    }

المراقب المالي كإصدار (مستحسن)

هنا القالب

<div ng-app="example" ng-controller="myController as $ctrl">
    <input type="text" ng-model="$ctrl.searchText" />
    <button ng-click="$ctrl.check()">Check!</button>
    {{ $ctrl.searchText }}
</div>

شبيبة

angular.module('example', [])
  .controller('myController', function() {
    var vm = this;
    vm.check = function () {
      console.log(vm.searchText);
    };
  });

مثال على ذلك: http://codepen.io/Damax/pen/rjawoO

سيكون أفضل استخدام مكون مع Angular 2.x أو Angular 1.5 أو أعلى

########

طريقة قديمة (غير مستحسن)

هذا غير مستحسن لأن سلسلة بدائية ، يوصى بشدة باستخدام كائن بدلاً من ذلك

جرب هذا في الترميز الخاص بك

<input type="text" ng-model="searchText" />
<button ng-click="check(searchText)">Check!</button>
{{ searchText }}

وهذا في وحدة التحكم الخاصة بك

$scope.check = function (searchText) {
    console.log(searchText);
}




angular-ngmodel