2015-05-10 6 views
2

Я только начал изучать AngularJS, следуя this youtube video. Первая часть в порядке, за исключением случаев, когда речь идет о части controller.Контроллер AngualrJS не работает

Мой код, как показано ниже (это то же самое, как и в видео)

<html data-ng-app=""> 

    <head> 
     <script src="angular.min.js"></script> 
     <script> 
      function SimpleController($scope) { 
       $scope.customers = [{ 
        name: 'Kamal', 
        city: 'York' 
       }, { 
        name: 'Sunil', 
        city: 'DC' 
       }, { 
        name: 'Malith', 
        city: 'Gotham' 
       }]; 
      } 
     </script> 
    </head> 

    <body> 
     <div data-ng-controller="SimpleController">Name : 
      <input type="text" data-ng-model="name" /> 
      </br> 
      <ul> 
       <li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li> 
      </ul> 
     </div> 
    </body> 

</html> 

, когда я добавляю data-ng-controller="SimpleController" он не будет работать, и дать следующую ошибку в консоли.

enter image description here enter image description here

Тогда, когда я пытаюсь опубликовать вопрос в SO, I tried it in JSfiddle. Я добавил Angular.js и выбрал onLoad и не работал. Но когда я выбрал no wrap - in <head>, он отлично работает.

Но я не могу это сделать на своей локальной машине, поэтому проблема остается такой, какая есть.

Может ли кто-нибудь указать мне правильный путь?

ответ

3

Вам необходимо инициализировать приложение:

var app = angular.module("myApp", []); 

<div ng-app="myApp" ng-controller="SimpleController"> 
<!--   ^^^^^ --> 

Демо: http://jsfiddle.net/xy23ybzp/2/

Docs: https://docs.angularjs.org/guide/bootstrap

Проверка Раздел Руководство Инициализация в Документах

+0

Да. Он будет работать в JSFiddle. Попробуйте выбрать 'onLoad' вместо' no wrap 'в ', когда вы выберете файл' angularJS'. то это не сработает. Тем не менее проблема остается в моем локальном коде. – prime

+0

Я имею в виду, что мой код JSFiddle по-прежнему работает без ваших изменений. Но если я выберу 'onLoad', тогда это не сработает. – prime

+0

@prime http://stackoverflow.com/a/19203991/2025923 – Tushar

0

После получения справки из ответов, перечисленных здесь этот вопрос. Я заработал. Ниже приведен рабочий код.

<html > 
<head> 
<script src = "angular.min.js" ></script> 
<script> 
    var app = angular.module("myApp", []); 
    app.controller("SimpleController",function($scope){ 
     $scope.customers = [ 
     {name :'Kamal',city : 'York'}, 
     {name : 'Sunil',city:'DC'}, 
     {name : 'Malith',city:'Gotham'} 
     ]; 
    }); 
</script> 

    </head> 
    <body > 

    <div ng-app="myApp" data-ng-controller="SimpleController"> 
    Name : 
    <input type="text" data-ng-model="name" /> 
    </br> 
    <ul> 
     <li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li> 
    </ul> 
</div> 

</body> 
</html> 
Смежные вопросы