AngularJS ng stili taşınmıyor

Question

Stil özelliklerinin neden güncellenmediğini anlayamıyorum. Daha büyük uygulamamda iyi çalışıyor gibi görünüyor. İşte

http://jsfiddle.net/ganarajpr/C2hRa/4/

angular.module('Model', []) 
    .factory('SizeModel', function() { 
     return { 
      width: 200, 
      height: 100, 
      display:"block", 
      getCombined: function() { 
       return parseInt(this.width) + parseInt(this.height); 
      } 
     }; 
    }); 

function AlbumCtrl($scope,SizeModel) { 
    $scope.master = SizeModel; 
    $scope.$watch("master",function(){ 
    $scope.myprop = { display: $scope.master.display, 
         backgroundColor: "#333", 
         width: $scope.master.width+'px', 
         height: $scope.master.height+'px', 
         color: "#FFF" 
        }; 
     }); 

} 

function AnoCtrl($scope,SizeModel) { 
    $scope.master = SizeModel; 

    $scope.toggle = function(){ 
     $scope.master.display = "none"; 
    } 
} 

function EditCtrl($scope,SizeModel) { 
    $scope.master = SizeModel; 
} 

Şu anda karşı karşıya am sorunu gösteren bir keman olduğunu. Girişi değiştirdiğinizde genişliğin ve yüksekliğin div içinde güncelleneceğini fark edeceksiniz. Ancak stilin kendisi güncellenmiyor. Burada yanlış yaptığım şeyi bana herkes anlatabilir mi?

Ben $ kapsamını kullanarak tüm aşağıdaki senaryoları

1. denedi $ uygulamak .. -. $ Zaten devam uygulamak belirten bir hata ..
2. $ rootScope Atar $ uygulamak -. Aynı yukarıdaki gibi.
3. Başka bir değişkeni, diğer denetleyicide izlenen $ değerinde bir hizmette ayarlama. - Değişiklik görülmedi.

Birisi bana bunun cevabını verebilirse çok güzel olurdu. Bana neden tam olarak güncellenmediğini söylerseniz gerçekten mutlu olurdum.

Answer 1

Genişlik ve yükseklik değerlerini myprop stil alanına bir defaya mahsus olarak atamıştınız. Yani genişliği veya yüksekliği değiştirdiğinizde myprop değişmiyordu.

Değişim yerine değerini hesaplayan bir işleve myProp değeri ...

Answer 2

http://jsfiddle.net/DyHHJ/ Sizin AlbumCtrl içinde $scope.$watch sadece! == JavaScript operatörü aracılığıyla sıkı karşılaştırma ile belirlenir reference inequality, saatler . Nesnede yalnızca bir özelliği değiştirdiğinizden, master referansı hala aynıdır ve $ saatini ateşlemez. ObjectEquality'i kullanmak için $ watch'a ek bir argüman göndermelisiniz. true angular.equals işlevi tarafından watchExpression eşitsizliğini belirlemek için açısal söyler

$scope.$watch("master",function() { 
    $scope.myprop = { 
    display: $scope.master.display, 
    backgroundColor: "#333", 
    width: $scope.master.width+'px', 
    height: $scope.master.height+'px', 
    color: "#FFF" 
    }; 
}, true); 

üçüncü argüman: aşağıdaki ilgili kodu buraya bu plunkr bakın ve. Güncelleştirilmiş master nesnesinin değiştirildiğini doğru olarak doğrular ve myprop