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.