AngularJS ng-контроллер не работает

Я только что начал изучать AngularJS в w3schools. Я пытаюсь практиковать примеры того, что они когда-либо упоминали в учебниках. Все работает нормально, но когда я пришел к «Контроллерам AngularJS», он не работает должным образом, как хорошо работает в w3schools Попробуйте сами ». Я разветвил свой код на этот пример скрипки. Мой скрипт выглядит так:

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

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


person UiUx    schedule 28.10.2014    source источник
comment
человек, ваш код работает нормально, просто измените параметр в скрипте с onload на no wrap - в ‹head› вот измененный параметр jsfiddle.net/dq8r196v/2   -  person Mohammad Shahrouri    schedule 28.10.2014
comment
да, это нормально в скрипке, но не на моей локальной машине. Я получаю следующую ошибку: Ошибка: [ng:areq] Аргумент 'personController' не является функцией, он не определен   -  person UiUx    schedule 28.10.2014
comment
Спасибо за этот вопрос, у меня такая же проблема, когда я следую другому учебнику. Мне интересно, была ли это новая версия AngularJS, для которой требовался другой синтаксис?   -  person Yevgeniy Afanasyev    schedule 21.12.2015


Ответы (8)


Это ваша исправленная скрипка.

Для angular рекомендуется, чтобы определение контроллера выглядело примерно так:

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

И, без сомнения, лучший учебник для изучения основ Angular — это CodeSchool один!

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

person Kutyel    schedule 30.10.2014
comment
да, он отлично работает, когда я меняю свою функцию на ваш код angular.module. но в чем разница между этими двумя функциями..? - person UiUx; 30.10.2014
comment
в основном синтаксис, который я использовал, позволит вам в будущем передавать больше параметров вашему контроллеру, например, $http и многие другие, что очень полезно. - person Kutyel; 30.10.2014

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

person katmanco    schedule 30.10.2014
comment
кажется, вы правы, но можете ли вы предоставить какой-либо ресурс для этого. ссылка, которую вы предоставили, не упоминает ничего написанного. - person Kick Buttowski; 26.03.2015
comment
Я рвал на себе волосы во время отладки, почему он работал нормально несколько недель назад (1.2.x) и не работает сейчас (1.3.x) ;-) - person K. Siva Prasad Reddy; 04.06.2015

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

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

С вашим кодом не возникло никаких проблем, за исключением настроек скрипта JS с onLoad на Без переноса в голову

введите здесь описание изображения

person khichar.anil    schedule 28.10.2014
comment
когда я пытался на своей локальной машине, я получаю следующую ошибку. Ошибка: [ng:areq] Аргумент 'personController' не является функцией, стал неопределенным - person UiUx; 28.10.2014
comment
Привет @UiUx, не могли бы вы опубликовать свой локальный код, включая html и js, чтобы я мог помочь вам лучше. - person khichar.anil; 28.10.2014
comment
Спасибо. Это работает, кстати, в новом дизайне скрипта JS вам нужно настроить эту опцию в области javascript в раскрывающемся меню под кнопкой (JavaSctipt + шестеренка). - person Yevgeniy Afanasyev; 21.12.2015


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

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

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

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

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

person Benjamin Solum    schedule 15.07.2015

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

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

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

person Samreen Quyyum    schedule 26.10.2016
comment
Спасибо тебе, друг. Ваш ответ + Кутьель решил мою проблему - person Jason Krs; 25.03.2018

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

В документации говорится:

AngularJS applications cannot be nested within each other.

person Yevgeniy Afanasyev    schedule 19.12.2015