AngularJS 在 JSFiddle 上

Question

我是新手 AngularJS，我正在尝试在 JSFiddle 中使用 AngularJS 测试最基本的形式。我不确定我是否忘记在 JSFiddle 中配置任何东西，但它不工作，它应该。

我遵循了 here 中的基本样本。

我还包括来自 here 的 CDN。

这里是 Angular 代码：

var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.firstname = "John";
});

Link 我的 Fiddle: http://jsfiddle.net/bheng/tth4guev/

设置

包括

如何进一步调试它？

Answer 1

我明白了，您没有为您的控制器和 Angular 应用程序添加名称，但在您正在访问的 JS 中 'formctrl'。继续在表单周围添加一个 div 并在您的表单中添加一个 ng-app='myApp' 和一个 ng-controller='form-ctrl' ，它应该可以工作。

Answer 2

您需要将表单标签包装在具有 ng-app 属性的 div 标签中。您的 h1 标签也应封装在 div 标签中...

这是一个工作示例：

<div ng-app="">
  <form>
  First Name: <input type="text" ng-model="firstname">
  </form>
  <h1>You entered: {{firstname}}</h1>
</div>

Answer 3

缺少两件事

(i) 您需要添加 ng-app 指令如下，

<div ng-app="myApp" ng-controller="formCtrl">

(ii) 将angular.js脚本版本改为1.1以上，不使用全局控制器，加载类型改为No wrap in <head>

WORKING FIDDLE

Answer 4

这是我在您的代码中看到的内容：您需要将 App 和控制器的名称添加到 div.

此外，您在两个字段中都重复了 person 的名称，如果您愿意，可以使用此人信息制作一个 object访问他的每个数据字段：

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

AngularJS 在 JSFiddle 上

AngularJS on JSFiddle

javascript

jsfiddle

angularjs

设置

包括