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 に答える