javascript - 无法让 AngularJS 在 JSFiddle 上工作

标签 javascript angularjs jsfiddle

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

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

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

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

最佳答案

一些事情:

您忘记在 HTML 中声明 ngApp 指令

您在 Controller 定义中拼写了 Ctrl 错误

您在 Controller 注入(inject)中将 $Scope 大写 - 但试图引用 $scope

工作 fiddle :https://jsfiddle.net/ke10sq2v/1/

重要提示:(根据下面 Jack A. 的评论) 您需要为 JavaScript 选择一种“无换行”加载类型。默认的“加载时”不适用于 Angular...

关于javascript - 无法让 AngularJS 在 JSFiddle 上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36266047/

相关文章:

javascript - 如何从div内的所有元素中删除特定属性?

javascript - 在 Sanctuary Maybe 上使用 `.of` 构造函数

javascript - Angularjs $编译输入html或元素

AngularJS - 自引用服务?

javascript - 无法在页面中获取此 fiddle

javascript - jQuery可在jsFiddle上使用,但不能在实时页面上使用

javascript - 如何等待异步方法的回调返回值?

javascript - 这个 Angular-ui typeahead 代码有什么问题?

javascript - 这个人如何让控制台显示在 jsfiddle 的输出 Pane 下方?

javascript - 在没有 disconnectedCallback 的情况下将元素从 light DOM 移动到 ShadowDOM