AngularJS ng-style no cambia con la propiedad

Question

No puedo entender por qué la propiedad de estilo no se está actualizando. En mi aplicación más grande parece funcionar bien.

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

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

Aquí es un violín que muestra el problema que estoy enfrentando actualmente. Notarás que el ancho y el alto se actualizan en el div cuando cambias la entrada. Pero el estilo en sí mismo no parece estar actualizando. ¿Alguien puede decirme qué estoy haciendo mal aquí?

He probado todos los siguientes escenarios

1. utilizando $ $ ámbito de aplicación .. -. Emite un error que indica que ya se aplican $ en curso ..
2. $ rootScope aplican $ -. Igual que el anterior.
3. Configurando otra variable en un servicio que se ve $ en el otro controlador. - no se han visto cambios.

Sería genial si alguien me puede dar una respuesta a esto. También sería muy feliz si puedes decirme por qué exactamente no se está actualizando.

Answer 1

Ha asignado los valores de ancho y alto al campo de estilo myprop por única vez. Entonces, cuando cambiaste el ancho o la altura, myprop no cambiaba.

Cambiar el valor myprop a una función que calcula su valor en lugar ...

http://jsfiddle.net/DyHHJ/

Answer 2

Su $scope.$watch en el AlbumCtrl Solo los relojes reference inequality, que se determina por comparación estricta a través de la! == operador de Javascript . Como está cambiando solo una propiedad en el objeto, la referencia a master sigue siendo la misma y no activa el $ watch. Debe pasar un argumento adicional a $ watch para usar objectEquality. Ver este plunkr, y aquí está el código correspondiente a continuación:

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

El tercer argumento true dice angular para determinar la desigualdad de la watchExpression por la función angular.equals. Determina correctamente que se ha cambiado el objeto actualizado master y actualiza myprop