我正在学习 Angular.js。我想制作一个表单，用户可以在其中看到他们填写的输出。
这是test.html:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0-rc.2/angular.js"></script>
<script src="test.js"></script>
</head>
<body ng-app="charter">
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" ng-controller="graphicLanguageCTRL" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> <br>
</form>
</div>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</body>
这是test.js:
var app= angular.module("charter",[]);
app.controller("graphicLanguageCTRL",function($scope){
$scope.master= {
hed: ''
};
});
我希望输入到 input 标记中的内容在 h1 标记中可见。但是当我在 input 标签中输入内容时，h1 标签中什么也没有出现。
如何解决这个问题？
最佳答案
您的代码中有一些错误:
- 您正在 Controller 外部使用 ng-bind
- 您正在初始化
graphicLanguageCTRL两次 - 在您的脚本中您设置了错误的变量名称
下面是固定代码:
html
<body ng-app="charter">
<div id="layout-wrapper" ng-controller="graphicLanguageCTRL">
<form id="graphic-language" novalidate>
<h3>Language</h3>
<input type="text" name="headline" placeholder="Headline" ng-model="graphic.hed"> <br>
</form>
<h1 class="graphic-title" ng-bind="graphic.hed"></h1>
</div>
</body>
JS
var app = angular.module("charter",[]);
app.controller("graphicLanguageCTRL", function($scope){
$scope.<b>graphic</b> = {
hed : ''
};
});
关于javascript - 为什么这个 Angular ng-bind 不绑定(bind)到 ng-controller 上？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41070783/