0

我在理解如何使用 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 的内容并同时在表单上使用控制器？

我犯了什么错误？

4

1 回答 1

3

该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。

于 2013-09-30T11:01:58.363 回答