CODEWITHSUNDEEP
angularjsangularjs-directive
motleydev
motleydev

Reputation: 3447

ng-controller breaks angular parsing

I'm trying to learn Angular.js and I have a simple fiddle that should work according to the tutorial (at least I think it should) but clearly it doesn't.

A directive before the 'data-ng-controller' works but the same directive after fails. Thanks.

I've tried camelcase variants and traditional ng-directive variants. According to the docs - data-ng-directive should be valid as a workaround for html validation.

http://jsfiddle.net/p458q/

html:

<div ng-app="">
    <h3>{{ "test" }}</h3>
    <div data-ng-controller="ItemListCtrl">
        <ul>
            <li data-ng-repeat="item in items">
                {{ item.description }}
            </li>
        </ul>
        <h3>{{ "test" }}</h3>
    </div>
</div>

js:

function ItemListCtrl ($scope) {
 $scope.items = [
  { "description": "coffee pot" },
  { "description": "nerf gun" },
  { "description": "phone" }
 ];
}

Upvotes: 1

Views: 720

Answers (1)

Narretz
Narretz

Reputation: 4993

Your fiddle doesn't work correctly, because there are some things missing:

1) You must define a module for your app, and that module must be referenced in the DOM via ng-app

var app = angular.module('test', [])

2) For angular to work in jsfiddle, you must select "no wrap -in " in the second select box under Frameworks & Extensions

See http://jsfiddle.net/p458q/16/

With these changes, your fiddle works as aexpected. I don't think there's a problem with data-..., at least I don't see it from the fiddle.

Upvotes: 2

Related Questions