2013-07-22 26 views
48

Bir ui-select2 açılırken (ui-bootstrap gelen) modeline karşı bir saat kurulum var. Saat yüke bağlı, ancak veri değişimlerine dayanmıyor ve nedenini anlayamıyorum. Eşitlik karşılaştırması için üçüncü parametreyi (en azından benim kodumdan) kullanarak model değişikliğini uygulamam ya da kullanmamanın alışılagelmiş bir sorunu yoktur.

Ateşlemeyi sağlamak için ne yapmam gerekiyor? {Boolean =} - -

Here is a plunk demonstrating the issue.

+0

bir $ watch ateş değil ama bir ng vardı-eğer yeni bir kapsam oluşturuyordu, bu yüzden ng-model = "$ parent.myModal" koymak gerekiyordu, çünkü ben aslında anne ve babamı izliyordum .. –

cevap

32

Bazı şeyleri tamir ettim.

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

JS

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

O bulma d değil şikayet ettiği

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

index.html

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

detail.html ng denetleyiciyi, normalde adlandırılmış bir ng-app ve üzerinde tanımlı denetleyicileri bulunan bir modül ile yaptığım şekilde ayarladım.

Modelinizdeki değeri korumak için bir nesne ekledim. $ kapsam nesnesini modeliniz olarak kullanmak kötü bir uygulamadır, bunun yerine kapsamınız modeliniz olan bir nesneye başvurmalıdır.

+5

Sabit olan kısmı kalınlaştırdım. Yardım için teşekkürler. –

+0

Bu benim için de düzeltildi! Teşekkürler :) –

+0

Yani bu daha önce bir nesne kullanmadan benim için çalıştı ... Bir noktada bu filtreler doğrudan değişiklik yapmadan kırdı. Uygulama şablonu bileşenlerinde başka yerlerde ve bazı gözlemcilerde bazı kök değişkenleri ekledim. Bu çözümde olduğu gibi sadece değişkenlerden ziyade nesneler kullanmamın yaygın bir nedeni var mı? – darkace

104

.$watch() 3 bir bağımsız değişken olarak (isteğe bağlı)

$rootScope.Scope documentation

$watch(watchExpression, listener, objectEquality) 

objectEquality true geçen deneyin eşitlik yerine referans nesne karşılaştır .

+4

gün :) – jarandaf

+1

Bunun neden olduğunu anlamaya çalışırken kafamı bir duvara bir saatliğine yendim Çalışmıyor! Teşekkür ederim! –

+1

Köşeli bir yaratıktır, ama aynı zamanda çok zariftir ve neler olduğunu anladığınızda mükemmel sahneler yapar. –

11

yerine basit değişken

Örneğin (don "t KULLANIM) karmaşık bir nesne ile

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

saatinizi kullanarak Ama

$scope.selecteditem={selectedType:1}; 
$scope.$watch(
      function() { 
       return $scope.selecteditem.selectedType; 
      }, 
      function (newValue, oldValue) { 
       if (!angular.equals(oldValue, newValue)) { 
        $scope.DoWork(); 
       } 
      }, 
      true); 
altına Kullanılır bunun için basit bir düzeltme vardır

, ikinci örnekteki "slectedTypes" öğesinin, yalnızca kapsam değişkenini değil, nesne içinde yer aldığını, bunun eski Açısal sürümlerde bile çalışacağını unutmayın.

+0

Sanırım cevabım işe yarayabilir, ama "@Casey Flynn" in cevabı daha doğru ve kesin. http://stackoverflow.com/a/17795221/471499 –

3

kullandığınız takdirde denetleyici-olarak yaklaşımla bazı okuma böyle bir söz dizimi önerebiliriz:

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

yerine sadece böyle bir işlev alanı sarın: Ben

var myController = { 
    myValue: 1 
}; 
$scope.$watch(function() { 
    return myController.myValue; 
}, function() { 
    ... 
}, true); 
İlgili konular