Angular JS 中的 ngcontroller答案

【问题标题】：ngcontroller in Angular JSAngular JS 中的 ngcontroller
【发布时间】：2013-09-30 10:57:08
【问题描述】：

我在理解如何使用 ng-controller 时遇到了一些麻烦。我在 eventController.js 中有一个表单控制器。

<html ng-app>
<head>
<script src="angular.js"></script>
<script src="eventController.js"></script>
</head>
<body> 
<div>
<h3>My Event:<i>{{event.name}}</i></h3>
</div>
<div ng-controller="formController">
<form >
<label>Event Name:</label>
<input type="text" ng-model="event.name" placeholder="Event Name">
</form>
</div>
</body>
</html>

现在，当我在该部门中使用 ng-controller="formController" 时，标题 even.name 没有显示，否则它工作正常。当我在整个页面上使用 ng-controller 作为一个部门时，我会得到 {{event.name}} 而不是内容。

如何显示 event.name 的内容并同时使用表单上的控制器？

我犯了什么错误？

【问题讨论】：

标签： javascript forms angularjs angularjs-directive

【解决方案1】：

event.name 属性仅在所使用的控制器的范围内设置。在您的情况下，<div> 标签引入了一个新范围。在其中，{{event.name}} 将被数据绑定并替换为 event.name 的值。

在您的代码示例中，<h3> 标记位于<div ng-controller="formController"> 定义的范围之外，因此{{event.name}} 不会针对您的模型属性进行数据绑定。

要解决您的问题，请将 ng-controller 属性放在标题和表单的共同祖先元素上，如下所示：

<div ng-controller="formController">
    <div>
        <h3>My Event:<i>{{event.name}}</i></h3>
    </div>
    <form >
        <label>Event Name:</label>
        <input type="text" ng-model="event.name" placeholder="Event Name" />
    </form>
</div>

对于稍微复杂一点的示例，请查看文档：AngularJS: ngController。

【讨论】：

我之前尝试过，但我得到的是 {{event.name}} 而不是绑定数据

My事件：{{event.name}}

事件名称：
@Anathema.Imbued 看看这个 JSFiddle 表明该解决方案确实有效：jsfiddle.net/tAnNp。

My事件：{{event.name}}