52

这是我的 plnkr：http ://plnkr.co/edit/n8cRXwIpHJw3jUpL8PX5?p=preview你必须点击一个 li 元素，然后表单就会出现。输入一个随机字符串并点击“添加通知”。而不是 textarea 文本，您将得到未定义。

标记：

<ul>
    <li ng-repeat="ticket in tickets" ng-click="select(ticket)">
         {{ ticket.text }}
    </li>
</ul>
<div ui-if="selectedTicket != null">
     <form ng-submit="createNotice(selectedTicket)">
        <textarea ng-model="noticeText"></textarea>
        <button type="submit">add notice</button>
    </form>
</div>

JS部分：

$scope.createNotice = function(ticket){
   alert($scope.noticeText);
}

返回“未定义”。我注意到在使用 ui-if 的 angular-ui 时这不起作用。任何想法为什么这不起作用？如何解决？

4

4 回答 4

100

您的问题在于 ui-if 部分。Angular-ui 为该指令中的任何内容创建了一个新范围，因此为了访问父范围，您必须执行以下操作：

<textarea ng-model="$parent.noticeText"></textarea>

代替

<textarea ng-model="noticeText"></textarea>
于 2013-04-29T17:27:01.943 回答
68

这个问题发生在我身上，而不是ng-if在 textarea 元素周围的元素上使用指令。虽然马修的解决方案是正确的，但原因似乎是另一个。搜索那个问题指向这个帖子，所以我决定分享这个。

如果您查看此处的 AngularJS 文档https://docs.angularjs.org/api/ng/directive/textarea，您可以看到 Angular 添加了自己的指令<textarea>，称为“覆盖”默认 HTMLtextarea元素。这是导致整个混乱的新范围。

如果你有一个像

$scope.myText = 'Dummy text';

在您的控制器中并将其绑定到这样的textarea元素

<textarea ng-model="myText"></textarea>

AngularJS 会在指令的范围内寻找那个变量。它不在那里，因此他走到 $parent 那里。变量在那里，文本被插入到textarea. 更改 中的文本时textarea，Angular 不会更改父变量。相反，它会在指令的范围内创建一个新变量，因此不会更新原始变量。如果textarea按照 Mathew 的建议将 绑定到父变量，Angular 将始终绑定到正确的变量，问题就消失了。

<textarea ng-model="$parent.myText"></textarea>

希望这会为其他人解决这个问题并思考“WTF，在我的情况下我没有使用 ng-if 或任何其他指令！” 就像我第一次登陆这里时所做的那样；）

更新：使用控制器作为语法

很久以前就想添加这个，但没时间做。这是构建控制器的现代风格，应该用来代替$parent上面的东西。继续阅读以了解如何以及为什么。

从 AngularJS 1.2 开始，可以直接引用控制器对象而不是使用该$scope对象。这可以通过在 HTML 标记中使用以下语法来实现：

<div ng-controller="MyController as myc"> [...] </div>

流行的路由模块（即 UI 路由器）为其状态提供了类似的属性。对于 UI 路由器，您在状态定义中使用以下内容：

[...]
controller: "MyController",
controllerAs: "myc",
[...]

这有助于我们规避嵌套或错误寻址范围的问题。上面的示例将以这种方式构建。首先是 JavaScript 部分。直截了当，您简单地不使用$scope引用来设置文本，只需使用this将属性直接附加到控制器对象。

angular.module('myApp').controller('MyController', function () {
    this.myText = 'Dummy text';
});

with controller-as 语法的标记textarea如下所示：

<textarea ng-model="myc.myText"></textarea>

这是当今执行此类操作的最有效方法，因为它解决了嵌套范围的问题，使我们可以计算在某个点上我们有多少层。在使用旧的引用范围的方式时，在带有指令的元素内使用多个嵌套指令ng-controller可能会导致类似的情况。没有人真的想整天这样做！

<textarea ng-model="$parent.$parent.$parent.$parent.myText"></textarea>
于 2014-11-20T13:30:23.020 回答
29

将 textarea 绑定到范围变量的属性，而不是直接绑定到范围变量：

控制器：

$scope.notice = {text: ""}

模板：

<textarea ng-model="notice.text"></textarea>
于 2015-10-25T08:26:30.207 回答
2

确实，ui-if这造成了问题。Angular if 指令根据表达式破坏和重新创建 dom 树的部分。这是创建新范围，而不是 marandus 建议的 textarea 指令。

这是一篇关于 ngIf 和 ngShow 之间差异的帖子，很好地描述了这一点-<a href="https://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng- show-ng-hide">ng-if 和 ng-show/ng-hide 有什么区别。

于 2015-04-13T05:42:33.570 回答