Angular UI Modal 2 Way Binding Not Working

我正在添加一個Angular UI Modal，我將範圍傳遞給Modal Window進行雙向綁定。我使用resolve方法來傳遞範圍值。這樣做的工作類型的工作意味着，當ng模型的值在父變化時，它反映在模態窗口內。但是，如果模態窗口內的值發生更改，則不會在父級模型中反映出來。這裏是我的代碼：Angular UI Modal 2 Way Binding Not Working

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; 

};

爲什麼isint 2路父和模式的實例在上面的代碼不工作之間的結合？

來源

2014-05-07 Neel

您真的希望看到雙向裝訂發生在哪裏，您打印的是{{textbox}}？如果是這樣的話，當你在模態中時，你不再作用於'$ scope.textbox'，當你將它作爲'_ngModel'傳遞時，你創建了'$ scope.textbox'的副本，然後你modal'$ scope'項是'$ scope.ngModel' ...嘗試在父級上打印'{{ngModel}}'，看看會發生什麼 – Tom

更好地將$ scope作爲選項參數傳遞給模態打開函數 – Armen

@Tom當我說2路綁定時，我的意思是我想要文本如果其中任何一個值發生變化，則在父窗口和模態窗口中輸入框進行更改。例如，在我的例子中，parent中'input'的ng模型和模態窗口中的'input'是相同的。所以當我在父'輸入'中輸入某個東西，然後打開模式時，我可以看到模態輸入具有相同的值。但是當我在模態實例的'input'中輸入內容時，它不會在父輸入上更新它。當那兩個綁定相同的ng模型時，它不應該更新嗎？ – Neel

我覺得你的印象是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; 
    }); 
};

來源

2014-05-07 13:40:19 Tom

你是非常正確的。我完全誤解了，因爲我認爲通過open（）傳遞ng模型將賦予模態相同的ng模型範圍，並自動綁定這兩個模型。你的回答爲我清楚。我喜歡你使用'modalInstance.result'承諾來更新父母的ng模型並將其與模態實例同步的建議。使總體感覺！我會嘗試一下我的代碼，並會回報。 – Neel

對不起，我又回來了。在我的代碼中，我現在通過'$ modalInstance.close'傳遞更新的ng模型。但是，在處理承諾的父控制器中添加最後一個代碼時，我遇到了一些問題。當我添加代碼時，我得到'modalInstance is not defined'錯誤。我想我把這段代碼放在父控制器的錯誤位置。這是否在'$ scope.open'函數內部或外部？我是否還需要在父級控制器中添加'$ modalInstance' DI？對不起，如果這是一個愚蠢的問題。 – Neel

是的，您需要在與您定義'modalInstance'相同的塊中執行'modalInstance.result'，即'var modalInstance = $ modal.open（{...}）; modalInstance.result.then（...）' – Tom

變化：

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

分爲：

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

這與transclusion做。檢查：https://github.com/angular-ui/bootstrap/issues/969

來源

2014-05-07 13:18:53

你救了我的一天！ – greener

謝謝！很高興我做到了！ :) –

對我而言，以上都無效。我不得不像this comment in github中建議的那樣做。

要綁定到的變量必須是一個對象，不僅是一個簡單的值。

例如，如果$scope.value不起作用，它將工作，如果您使用$scope.someObject.value。

來源

2015-08-04 14:59:30

Angular UI Modal 2 Way Binding Not Working

回答

相關問題