與彈出式指令一起使用時發生雙向綁定錯誤

我正在嘗試使用angularjs模式彈出式指令。在那個彈出窗口中我使用了選項卡和窗格指令。我有兩個文本框（都具有相同的ng-model = myName），一個在我的主頁面，另一個在我的彈出窗口中。如果我更改主頁中的值，它將在彈出文本框中得到更新，但是當我更改彈出文本框時，主頁面文本框沒有更新。如何解決它。與彈出式指令一起使用時發生雙向綁定錯誤

// html page 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html ng-app="modalDemo"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>modal popup</title> 

<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/style.css"> 
<script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> 

<script type="text/javascript" src="js/angular.min.js"></script> 
<script type="text/javascript" src="js/angular-resource.min.js"></script> 
<script type="text/javascript" src="js/route1.js"></script> 
<script type="text/javascript" src="js/controller.js"></script> 
<script type="text/javascript" src="js/scripts.js"></script> 
</head> 
<body ng-controller="bodyCtrl"> 
<br /> 
<input type="text" ng-model="myName" /> 
<button ng-click="primaryAction()">click to load default text</button> <br /><br /> 

<button modal-open="myModal"> click me</button> 

<popup modal-id="myModal" modal-type="tabs" show-header="false" header-title="Modal Header"> 

<tabs> 
<pane title="first"> 
    <input type="text" name="myName" ng-model="myName"> 
     <button class="btn btn-primary" ng-click="primaryAction()">save</button> 
</pane> 
<pane title="second"> 
    <h3>content2</h3> 
</pane> 
<pane title="Third"> 
    <h3>content3</h3> 
</pane> 

</tabs>

我已經張貼在我撥弄我的代碼。 fiddle here

來源

2013-02-21 Prashanth Suriyanarayanan

這是因爲有兩個不同的範圍，其中一個是另一個的父級。子範圍上不存在myName屬性時，子範圍從父範圍獲取myName。也就是說，當您更改外部輸入（連接到父範圍）中的值時，tabs指令內的輸入會更新。但是，當您編輯標籤內的輸入字段的值時，該值將被寫入子範圍的新myName屬性，並且myName不再連接在父範圍和子範圍之間。

如果你想分享這樣的ng模型，確保你的模型包含一個點。類似myModel.myName而不是myName。這將導致JavaScript首先在子作用域上查找myModel，但由於子作用域沒有myModel，因此它會在父作用域中查找它並在該對象上設置myName。

下面是一個工作示例：http://jsfiddle.net/Zd7ax/30/

來源

2013-02-21 12:33:48

與彈出式指令一起使用時發生雙向綁定錯誤

回答

相關問題