无法让AngularJS在JSFiddle上运行

时间:2016-03-28 16:02:15

标签: javascript angularjs jsfiddle

我正在尝试使用JSFiddle上的AngularJS。

我已经将其他类似的项目复制到了T,但是当我自己尝试时,JSFiddle给了我各种各样的错误。目前,它告诉我,这是无法识别我的控制器。

如果有人可以看看我真正简单的小提琴并告诉我它为什么不起作用,我真的很感激。

https://jsfiddle.net/ke10sq2v/

以下是代码:

angular.module('App', ['ngAnimate'])
.controller("Ctlr", ['$scope', function($Scope){
    $scope.hi = "yolo";
}]);

HTML

<div ng-controller="Ctrl" ng-init="showBoxes=false">
  <div class="block" ng-show="showBoxes">Block 1</div>
  <div class="block" ng-show="showBoxes">Block 2</div>
  <button ng-click="showBoxes=!showBoxes">Toggle</button>
  <p>Show Boxes: {{showBoxes}} {{hi}}</p>
</div>

CSS

.block {
  height: 100px;
  width: 100px;
  background-color: blue;
  margin: 15px 10px;
}

1 个答案:

答案 0 :(得分:5)

一些事情:

您忘记在HTML

中声明ngApp指令

你在控制器定义中拼写错误Ctrl

您在控制器注入中大写$Scope - 但尝试引用$scope

工作小提琴:https://jsfiddle.net/ke10sq2v/1/

重要提示:(根据以下Jack A.的评论) 您需要选择其中一个&#34; No wrap&#34;加载JavaScript的类型。默认&#34;加载&#34;不适用于Angular ......