JSFiddle上的AngularJS
[英]AngularJS on JSFiddle
问题描述
I'm new AngularJS, I'm trying to test the most basic form using AngularJS in JSFiddle. 
我是新的AngularJS，我正在尝试在JSFiddle中使用AngularJS测试最基本的形式。 I'm not sure if I forget to configure anything in JSFiddle, but it is not working and it should. 我不确定是否忘记在JSFiddle中配置任何东西，但是它不起作用并且应该。
I followed a basic sample from here . 我从这里跟踪了一个基本样本。
I also include the CDN from here . 我也从这里包括CDN。
Here is the Angular code: 这是Angular代码：
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
$scope.firstname = "John";
});
Link to my Fiddle: http://jsfiddle.net/bheng/tth4guev/ 链接到我的小提琴： http : //jsfiddle.net/bheng/tth4guev/
Settings 设置
include 包括
How would one go about debugging this further? 人们将如何进一步调试呢？
4 个解决方案
解决方案1
1 2018-02-16 18:28:15
I see, you did not add a name to your controller,and Angular App but in the JS you are accessing 'formctrl'. 我知道，您没有在控制器和Angular App中添加名称，但是在JS中您正在访问“ formctrl”。 Go ahead and add a div around the form and add a ng-app='myApp' and a ng-controller='form-ctrl' to your form and it should work. 继续，在表单周围添加一个div，然后在表单中添加ng-app ='myApp'和ng-controller ='form-ctrl'，它应该可以正常工作。
解决方案2
1 2018-02-16 18:32:28
You need to wrap the form tag in a div tag with ng-app attribute. 您需要使用ng-app属性将form标签包装在div标签中。 Your h1 tag should be encapsulated within the div tag as well... 您的h1标签也应该封装在div标签中...
Here's a working example: 这是一个工作示例：
<div ng-app="">
<form>
First Name: <input type="text" ng-model="firstname">
</form>
<h1>You entered: {{firstname}}</h1>
</div>
解决方案3
1 已采纳 2018-02-16 19:06:29
There are two things missing 缺少两件事
(i) You need to add ng-app directive as follows, （i）您需要添加ng-app指令，如下所示：
<div ng-app="myApp" ng-controller="formCtrl">
(ii) Change the angular.js script version above 1.1 to use without a global controller, and change load type as No wrap in <head> （ii）将angular.js脚本版本更改为1.1以上以在没有全局控制器的情况下使用，并将负载类型更改为No wrap in <head>
解决方案4
1 2018-02-16 21:29:32
So here's the thing I saw with your code: You need to add the name of the App and the controller to the div. 因此，这就是我在代码中看到的内容：您需要将App和控制器的名称添加到div中。
Also you are repeating the name of the person in both fields, if you wish you can make an object with the person information to access each of his data fields: 另外，您还要在两个字段中都重复此人的姓名，如果您希望可以使用该人的信息来创建一个对象 ，以访问其每个数据字段：
<div ng-app="myApp" ng-controller="formCtrl">
<form>
Email: <input type="text" ng-model="person.firstname" />
Password: <input type="text" ng-model="person.password" />
</form>
<h1>You entered: {{ person.firstname }}</h1>
</div>
<script>
var myApp = angular
.module("myApp",[])
.controller("formCtrl", function($scope) {
//here's the object called "person":
var person = {
firstname: "John",
password: "password"
};
$scope.person = person;
});
</script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.