2014-10-28 3 views
19

Я только что начал изучать AngularJS от w3schools. Я пытаюсь практиковать примеры, о чем они упоминали в учебниках. Все отлично работает, но когда я пришел в «AngularJS Controllers», он не работает должным образом, как хорошо работает в w3schools Try it Yourself ». Я превратил свой код в этот fiddle example. Мой сценарий выглядит следующим образом:AngularJS ng-controller не работает

function personController($scope) { 
    $scope.firstName= "John"; 
    $scope.lastName= "Doe"; 
} 

Try, чтобы помочь мне и предложить мне хороший учебник (или любой свободный файл PDF).

+1

человек ваш код работает нормально, просто измените вариант в скрипке от onload до "no wrap - in " здесь измененный вариант http://jsfiddle.net/dq8r196v/2/ –

+1

да это нормально в скрипке, но не на моей локальной машине. Я получаю следующую ошибку: Ошибка: [ng: areq] Аргумент 'personController' не является функцией, получил undefined – UiUx

+0

Спасибо за этот вопрос, у меня такая же проблема, когда я следую другому учебнику. Мне интересно, это была новая версия AngularJS, которая требовала другого синтаксиса? –

ответ

21

Это ваша corrected fiddle.

Это хорошая практика для углового, что определение контроллера должно выглядеть примерно так:

angular.module("app", []).controller("personController", function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
}); 

И, без сомнения, лучший учебник когда-либо для изучения основы угловых является CodeSchool один!

Надеюсь, это поможет.

+0

Да, он отлично работает, когда я меняю свою функцию на ваш код углового.module. но в чем разница между этими двумя функциями ..? – UiUx

+0

В основном синтаксис, который я использовал, позволит вам в будущем передавать больше параметров вашему контроллеру, например '$ http', и многие другие, что очень полезно. – Kutyel

+0

Спасибо Kutyel .... – UiUx

1

Вам необходимо создать модуль приложения, а затем добавить к нему контроллер. В угловом это все о зависимостях. Во-вторых, вам нужно имя приложения. Базовый учебник находится на главной странице: https://docs.angularjs.org/tutorial/step_00 Я начал с него, и он отлично работал со мной. Просто сделайте все шаги, начиная с шага 1.

+0

Их учебник очень прост, и вы учитесь небольшими шагами. Это займет у вас около 3 часов. Затем вам придется искать более продвинутые учебники и начинать чтение документации :) Угловая очень продвинутая. – Beri

+0

Привет, Beri спасибо за ваше время, и я получаю ошибку, о которой я упомянул выше, пожалуйста, найдите ее и помогите мне – UiUx

4

Я только что изменил вашу скрипку js. Пожалуйста, проверьте fiddle example

function personController($scope) { 
    $scope.firstName= "John"; 
    $scope.lastName= "Doe"; 
} 

There was no issue with your code except JS fiddle settings from onLoad to No wrap - in head

enter image description here

+0

, когда я попробовал на своей локальной машине. Я получаю следующую ошибку. Ошибка: [ng: areq] Аргумент «personController» не является функцией, получил undefined – UiUx

+0

Привет, UiUx. Не могли бы вы разместить свой локальный код, включая html и js, чтобы я мог помочь вам лучше. –

+0

Спасибо. Это работает, BTW в новом дизайне скрипта JS вам нужно настроить этот параметр в области javascript в раскрывающемся меню под кнопкой (JavaSctipt + gear). –

11

Это новый подход. Мы больше не можем использовать контроллеры без модуля. Посмотрите на this. Просто добавьте модуль и добавьте контроллер, тогда у вас не будет проблем.

+0

кажется, что вы правы, но можете ли вы предоставить какой-либо ресурс для этого. ссылка, которую вы указали, не упоминает ничего написанного. –

+0

Я вытащил свои волосы во время отладки, почему он работал отлично несколько недель назад (1.2.x) и теперь не работает (1.3.x) ;-) –

1

Это общий результат поиска для «Angular Controller Not Working», поэтому я подумал, что было бы полезно добавить решение, которое устраняет проблему «не работает».

У меня был база маршрута с $routeProvider указывающих на файл контроллер и templateUrl парциальной как так:

$routeProvider.when('/', { 
    templateUrl: 'partials/home.html', 
    controller: 'homePage' 
}); 

я имел несколько других маршрутов, и все эти контроллеры работал, но по какой-то причине моего первого маршрута Wouldn» т. Оказывается, у меня была небольшая логическая ошибка в моем частичном, и это предотвратило ЛЮБОЙ код моего контроллера.

Глупая небольшая ошибка, но я был застигнут врасплох, что это была логическая проблема в моей частичной части, которая препятствовала запуску любого кода контроллера. Это заняло гораздо больше времени, чем я хотел бы признать, потому что проблема не была в моем «JavaScript», хотя присутствовали ошибки консоли. Радости плотно связанного кода переднего плана, amiright?

0

Такие же проблемы могут возникнуть, если вы попытаетесь вложить ngApp в anothe ngApp.

В документации сказано:

AngularJS applications cannot be nested within each other.

0

Вы должны входной функции в качестве параметра внутри модуля

var app = angular.module('app',[]); 
app.controller('personController',function($scope){ 
    $scope.firstName = 'John'; 
    $scope.lastName = 'Smith'; 
}); 
0

путем добавления np-app="myApp" в любом теге HTML, как <html ng-app = "myApp"> мой код работает отлично ,

Смежные вопросы