it-swarm.asia

$ مشاهدة لا تطلق النار على تغيير البيانات

لديّ إعداد للساعة مقابل طراز القائمة المنسدلة لـ ui-select2 (من واجهة المستخدم التمهيدية). تنطلق الساعة عند التحميل ولكن ليس على تغييرات البيانات ولا يمكنني معرفة السبب.

ليست المشكلة المعتادة هي عدم تطبيق $ لتغيير النموذج أو عدم استخدام المعلمة الثالثة للمقارنة بين المساواة (على الأقل من الكود الخاص بي).

ما الذي يجب علي فعله لحمله على إطلاق النار؟

هنا هو الشرير يدل على هذه القضية.

57
µBio

أنا ثابتة بعض الأشياء.

http://plnkr.co/edit/5Zaln7QT2gETVcGiMdoW؟p=preview

شبيبة

var myMod = angular.module("myApp",[]).controller("MainController",  function($scope){
  $scope.myModel = {selectedId:null};
}).controller("DetailController",function($scope){
  $scope.items = [1,2,3,4];

  $scope.watchHitCount = 0;
  $scope.$watch('myModel.selectedId', function(newVal, oldVal){
    console.log(newVal + " " + oldVal);
    $scope.watchHitCount++;
  },true);
});

Index.html

  <body ng-app="myApp">
    <div ng-controller="MainController">
      <ng-include src="'detail.html'" ng-controller="DetailController"></ng-include>
    </div>
  </body>

التفاصيل.html

<pre>watch hit: {{watchHitCount}}</pre>
<pre>selected value: {{myModel.selectedId}}</pre>
<select ng-model="myModel.selectedId" ui-select2="">
  <option></option>
  <option ng-repeat="item in items" value="{{item}}">{{item}}</option>
</select>

لقد كانت تشكو من عدم العثور على جهاز التحكم ، لذا قمت بإعداده بالطريقة المعتادة مع تطبيق ng مسماة وأعلنت وحدة أن لديها وحدات تحكم محددة عليه.

أضفت أيضًا كائنًا لإبقاء القيمة في النموذج الخاص بك. من الممارسات السيئة استخدام كائن النطاق $ كنموذج ، بدلاً من ذلك ، يجب أن يشير نطاقك إلى كائن هو النموذج الخاص بك.

35
shaunhusain

حاول تمرير true كوسيطة ثالثة إلى .$watch()

$rootScope.Scope documentation

$watch(watchExpression, listener, objectEquality)

objectEquality (اختياري) - {boolean =} - قارن الكائن من أجل المساواة بدلاً من المرجع.

119
Casey Flynn

هناك حل بسيط لذلك ، لاستخدام ساعة مع كائن معقد بدلا من متغير بسيط

على سبيل المثال (DON "T USE)

$scope.selectedType=1;//default
$scope.$watch(
            function () {
                return $scope.selectedType;
            },
            function (newValue, oldValue) {
                if (!angular.equals(oldValue, newValue)) {
                    $scope.DoWork();
                }
            },
            true);

لكن استخدم أدناه

$scope.selecteditem={selectedType:1};
$scope.$watch(
            function () {
                return $scope.selecteditem.selectedType;
            },
            function (newValue, oldValue) {
                if (!angular.equals(oldValue, newValue)) {
                    $scope.DoWork();
                }
            },
            true);

لاحظ أن "slectedTypes" في المثال الثاني يقع داخل الكائن ، وليس فقط متغير النطاق. سيعمل هذا حتى في الإصدارات القديمةAngular.

12
Tarek El-Mallah

إذا كنت تستخدم أداة التحكم - كما قد تقترح بعض القراءة - بناء جملة مثل هذا:

var myController = {
    myValue: 1
};
$scope.$watch('$ctrl.myValue', function () {
    ...
}, true);

بدلاً من ذلك ، قم فقط بلف الحقل في دالة مثل هذا:

var myController = {
    myValue: 1
};
$scope.$watch(function () {
    return myController.myValue;
}, function () {
    ...
}, true);
6
garryp