Question

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

我犯了什么错误？

Answer 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>属性放在标题和表单的公共祖先元素上，如下所示：

{{1}}

有关更复杂的示例，请查看文档：{{3}}。

Angularjs中的ng控制器

1 个答案: