AngularJS ng-style संपत्ति के साथ बदल नहीं रहा

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 मूल्य ...

http://jsfiddle.net/DyHHJ/

Answer 2

आपका AlbumCtrl में $scope.$watch केवल देखता है reference inequality, जो! == जावास्क्रिप्ट ऑपरेटर के माध्यम से सख्त तुलना से निर्धारित होता है । चूंकि आप ऑब्जेक्ट पर केवल एक संपत्ति बदल रहे हैं, master का संदर्भ अभी भी वही है और $ घड़ी को आग नहीं लगाता है। ऑब्जेक्ट एक्वालिटी का उपयोग करने के लिए आपको $ अतिरिक्त देखने के लिए एक अतिरिक्त तर्क पारित करने की आवश्यकता है। इस plunkr देखें, और यहाँ नीचे प्रासंगिक कोड है:

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

तीसरा तर्क true कोणीय बताता angular.equals समारोह से watchExpression की असमानता निर्धारित करने के लिए। यह सही ढंग से निर्धारित करता है कि अद्यतन master ऑब्जेक्ट बदल दिया गया है, और myprop