कोणीय यूआई मोडल 2 वे बाध्यकारी काम नहीं कर रहे

Question

मैं एक कोणीय यूआई मोडल जोड़ रहा हूं जहां मैं 2 विंडो बाध्यकारी के लिए मॉडल विंडो के माध्यम से दायरा पास कर रहा हूं। मैंने दायरे के मूल्य को पारित करने के लिए resolve विधि का उपयोग किया। ऐसा करने से कार्यों का प्रकार काम करता है जिसका अर्थ है कि जब एनजी-मॉडल मान माता-पिता में बदलता है, तो यह मोडल विंडो के अंदर प्रतिबिंबित होता है। हालांकि, यदि मोडल विंडो के अंदर मान बदलता है, तो यह पैरेंट एनजी-मॉडल में प्रतिबिंबित नहीं होता है। यहाँ मेरी कोड है:

HTML:

<div ng-app="app"> 
    <div ng-controller="ParentController"> 
     <br /> 
     <input type="text" ng-model="textbox.sample" /> 
     <a class="btn btn-default" ng-click="open(textbox.sample)">Click Me</a> 

     <script type="text/ng-template" id="ModalContent.html"> 
      <input type = "text" ng-model= "ngModel"/> 
     </script> 


     <br />{{ textbox }}   
    </div> 
</div> 

नियंत्रक:

var app = angular.module('app', ['ui.bootstrap']); 

app.controller('ParentController', function ($scope, $modal) { 

    $scope.textbox = {}; 

    // MODAL WINDOW 
    $scope.open = function (_ngModel) { // The ngModel is passed from open() function in template 
     var modalInstance = $modal.open({ 
      templateUrl: 'ModalContent.html', 
      controller: ModalInstanceCtrl, 
      resolve: { 
       ngModel: function() { 
        return _ngModel; 
       } 
      } // end resolve 
     }); 
    }; 
}); 

var ModalInstanceCtrl = function ($scope, $modalInstance, ngModel) { 
    $scope.ngModel = ngModel; 

}; 

2 रास्ता माता पिता और मोडल उदाहरण उपरोक्त कोड में काम नहीं कर के बीच बंधन क्यों isint?

Answer 1

मुझे लगता है कि आप यह धारणा हो कि माता-पिता में ng-model="textbox.sample" और ng-model="ngModel" मोडल में एक ही है क्योंकि आप मोडल को textbox.sample गुजर रहे हैं और आप मोडल विंडो सही मान देखने में सक्षम हो । यह काम करने का एकमात्र कारण यह है कि आप मोडल विंडो खुलने के लिए हर बार $scope.ngModel संपत्ति को स्पष्ट रूप से सेट कर रहे हैं।

इस काम को बनाने का एक तरीका यह है कि आप दोनों जगहों पर $scope.textbox.sample संपत्ति का उपयोग करना चाहते हैं, लेकिन मैं इसकी अनुशंसा नहीं करता।

शायद उचित तरीके modalInstance.result वादा, कुछ इस तरह उपयोग करने के लिए होगा:

मोडल पर एक बटन बना सकते हैं और यह ng-click="ok()"

$scope.ok = function() { 
    $modalInstance.close($scope.ngModal); // will return this to the modalInstance.result 
} 

है और बनाने के तो माता-पिता नियंत्रक, या जो कुछ भी में मोडल विंडो खुलता है:

$scope.open = function (_ngModel) { // The ngModel is passed from open() function in template 
    var modalInstance = $modal.open({ 
     templateUrl: 'ModalContent.html', 
     controller: ModalInstanceCtrl, 
     resolve: { 
      ngModel: function() { 
       return _ngModel; 
      } 
     } // end resolve 
    }); 

    modalInstance.result.then(function (result) { 
     $scope.textbox.sample = result; 
    }); 
}; 

Answer 2

बदलें:

<input type = "text" ng-model= "ngModel"/> 

में:

<input type = "text" ng-model= "$parent.ngModel"/> 

यह ट्रांसक्लुजन से कोई लेना देना नहीं है। जाँच करें: https://github.com/angular-ui/bootstrap/issues/969

Answer 3

मेरे लिए उपरोक्त में से कोई भी काम नहीं करता है।

इसके बजाय मुझे ऐसा करना था जैसा कि this comment in github में सुझाया गया था।

वेरिएबल को एक ऑब्जेक्ट होना चाहिए, न कि केवल एक साधारण मूल्य।

उदाहरण के लिए, यदि $scope.value काम नहीं करता है, तो यह काम करेगा यदि आप $scope.someObject.value का उपयोग करते हैं।