AngularJSスタイルがプロパティで変更されない

Question

スタイルプロパティが更新されない理由を理解できないようです。私の大きなアプリケーションではうまくいくようです。ここで

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/

私は現在直面しています問題を示しフィドルです。入力を変更すると、divの幅と高さが更新されていることがわかります。しかし、スタイル自体は更新されていないようです。誰でも私がここで間違っていることを教えてくれる？

私は$スコープを使用して、すべての次のシナリオ

1. を試してみました$適用されます... - 。
2. $ rootScope .. $がすでに進行中で適用されますというエラーがスローされます$適用 - 上記と同じ。
3. 他のコントローラで$監視されているサービスの別の変数を設定します。 - 変化は見られません。

誰かが私にこれに対する答えを得ることができれば本当に涼しいでしょう。なぜ正確に更新されていないのか教えていただけたら本当にうれしいでしょう。

Answer 1

mypropスタイルフィールドに幅と高さの値を一度に割り当てました。だから、幅や高さを変更したとき、mypropは変化しませんでした。

変更の代わりに、その値を計算する関数へのMyPropで値...

http://jsfiddle.net/DyHHJ/

Answer 2

AlbumCtrlであなたの$scope.$watchだけ！== Javascriptのオペレータを経由して、厳密な比較により決定されたreference inequalityを、時計。オブジェクトのプロパティのみを変更するため、masterへの参照は同じで、$ watchは起動しません。 objectEqualityを使用するには、$ watchに追加の引数を渡す必要があります。 trueがangular.equals機能によってwatchExpressionの不平等を決定するために、角伝え

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

第三引数：下記関連するコードがあり、ここで、このplunkrを参照してください、と。正しく更新されたmasterオブジェクトが変更されたと判断し、更新しますmyprop