कोणीय यूआई बूटस्ट्रैप मॉडल अपडेट $ स्कोप

Question

मैं अपने डेटा को संपादित करने के लिए मोडल का उपयोग करना चाहता हूं। मैं डेटा को मोडल उदाहरण में पास करता हूं। जब मैं ठीक क्लिक करता हूं तो मैं संपादित डेटा को $ scope में पास करता हूं। नियंत्रक को वापस ले लिया गया।

वहां मैं मूल $ स्कोप अपडेट करना चाहता हूं। किसी भी तरह से $ scope हालांकि अद्यतन नहीं करता है। मैं क्या गलत कर रहा हूं?

var ModalDemoCtrl = function ($scope, $modal, $log) { 

    $scope.data = { name: '', serial: '' } 

    $scope.edit = function (theIndex) { 

    var modalInstance = $modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: ModalInstanceCtrl, 
     resolve: { 
     items: function() { 
      return $scope.data[theIndex]; 
     } 
     } 
    }); 

    modalInstance.result.then(function (selectedItem) { 
     $scope.selected = selectedItem; 

     // this is where the data gets updated, but doesn't do it 
     $scope.data.name = $scope.selected.name; 
     $scope.data.serial = $scope.selected.serial; 

    }); 
    }; 
}; 

मोडल नियंत्रक:

var ModalInstanceCtrl = function ($scope, $modalInstance, items) { 

    $scope.items = items; 
    $scope.selected = { 
    name: $scope.items.name, 
    serial: $scope.items.serial 
    }; 

    $scope.ok = function() { 
    $modalInstance.close($scope.selected); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
}; 

मॉडल:

<div class="modal-header"> 
    <h3>{{ name }}</h3> 
</div> 
<div class="modal-body"> 
    <input type="text" value="{{ serial }}"> 
    <input type="text" value="{{ name }}"> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" ng-click="ok()">OK</button> 
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button> 
</div> 

Answer 1

आप मोडल के लिए अपने टेम्पलेट को शामिल नहीं किया है, तो यह एक अनुमान का एक सा है। आपका कोड कोणीय-यूई मोडल के लिए उदाहरण कोड के बहुत करीब है, जो टेम्पलेट में ng-repeat का उपयोग करता है। यदि आप एक ही काम कर रहे हैं, तो आपको अवगत होना चाहिए कि ng-repeat एक बच्चे का दायरा बनाता है जो माता-पिता से विरासत में मिलता है।

इस स्निपेट से आंकना:

$scope.ok = function() { 
    $modalInstance.close($scope.selected); 
}; 

यह लग रहा है के बजाय की तरह अपने खाके में यह कर:

<li ng-repeat="item in items"> 
    <a ng-click="selected.item = item">{{ item }}</a> 
</li> 

आप कुछ इस तरह कर रही हो सकता है: अगर

<li ng-repeat="item in items"> 
    <a ng-click="selected = item">{{ item }}</a> 
</li> 

तो, फिर अपने मामले में, आप बच्चे के दायरे में selected असाइन कर रहे हैं, और इससे प्रभावित नहीं होंगे माता-पिता का दायरा selected संपत्ति। फिर, जब आप $scope.selected.name तक पहुंचने का प्रयास करते हैं, तो यह खाली होगा। सामान्य रूप से, आपको अपने मॉडल के लिए ऑब्जेक्ट्स का उपयोग करना चाहिए, और उन पर गुण सेट करना चाहिए, न कि नए मान सीधे निर्दिष्ट करें।

This part of the documentation अधिक विस्तार से दायरे की समस्या बताता है।

संपादित करें:

तुम भी किसी भी मॉडल के लिए अपने आदानों बाध्यकारी नहीं हैं, इसलिए आपके द्वारा प्रदत्त जानकारी वहाँ कहीं भी संग्रहीत कभी नहीं किया गया है। तुम्हें पता है, ng-model उपयोग करने के लिए है कि क्या करने की जरूरत उदा .:

<input type="text" ng-model="editable.serial" /> 
<input type="text" ng-model="editable.name" /> 

एक काम उदाहरण के लिए this plunkr देखें।