0

我正在尝试 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>

我已经在我的小提琴中发布了我的代码。在这里摆弄

4

1 回答 1

2

那是因为有两个不同的范围，其中一个是另一个的父级。当myName子作用域上不存在任何属性时，子作用域myName从父作用域获取。也就是说，当您更改外部输入（连接到父范围）中的值时， tabs 指令内的输入会更新。但是，当您在选项卡内编辑输入字段的值时，该值将写入myName子范围的新属性，并且myName不再在父范围和子范围之间连接。

如果您想像这样共享 ng-models，请确保您的模型包含一个点。类似的东西，myModel.myName而不仅仅是myName. 这将导致 JavaScript 首先myModel在子作用域上查找，但由于子作用域没有 a myModel，它会在父作用域中查找它并设置myName该对象。

这是一个工作示例：http: //jsfiddle.net/Zd7ax/30/

于 2013-02-21T12:33:48.030 回答