简体   繁体   中英

Cannot get AngularJS to work on JSFiddle

I am trying to work with AngularJS on JSFiddle.

I've copied other similar projects to the T, but still, JSFiddle is giving me all sorts of errors when I try it in my own. Currently, it is telling me that is doesn't recognize my controller.

I'd really appreciate if someone could have a look at my really simple Fiddle and tell me why it is not working.

https://jsfiddle.net/ke10sq2v/

Here's the code:

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

A few things:

You forgot to declare the ngApp directive in the HTML

You spelled Ctrl wrong in the controller defintion

You capitalized $Scope in the controller injection - but tried to reference $scope

Working fiddle: https://jsfiddle.net/ke10sq2v/1/

IMPORTANT: (as per comment from Jack A. below) You need to select one of the "No wrap" load types for the JavaScript. The default "on load" doesn't work with Angular...

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM