Objekt keine Funktion in AngularJS

Question

Ich habe einen Controller, der sich zu benehmen scheint. Ich habe alle anderen Code entfernt, dass dies kurz machen funktioniert:

Controller:

'use strict'; 

angular.module('AppliedSiteApp').controller('CarouselCtrl', function ($scope) { 

    $scope.nextImage = function() { 
     console.log('hi'); 
    } 

}); 

Ausblick:

<div class="carousel" ng-controller="CarouselCtrl"> 

    <ul class="nav"> 
     <li ng-click="prevImage()">&lt;</li> 
     <li ng-click="nextImage()">&gt;</li> 
    </ul> 

</div> 

Jedes Mal, wenn ich auf die Schaltfläche im Browser klicken Sie sagt: 'TypeError: Objekt ist keine Funktion' oder 'keine Methode ersetzen'. Was mache ich falsch?

Answer 1

Wenn Sie ein neues Modul erstellen, müssen Sie einen zweiten Parameter angeben (seine Abhängigkeiten). Wenn Sie keine haben, übergeben Sie einfach ein leeres Array.

angular.module('AppliedSiteApp', [])... 

Ihr Beispiel könnte ein bestehendes Modul zugreifen (das ist, wenn Sie nicht das zweite Argument nicht angeben), aber dann gibt es wahrscheinlich einige Code fehlen, den Fehler zu erkennen (oder ich bin einfach blind).

Answer 2

versuchen, die folgende Definition der Controller

var AppliedSiteApp = angular.module('AppliedSiteApp', []); 

function CarouselCtrl($scope) { 

    $scope.nextImage = function() { 
     console.log('hi'); 
    } 
} 

Answer 3

Irgend etwas stimmt nicht mit der Art und Weise Sie die Dinge Verdrahtung sind glaube ich. Normalerweise verwende ich dieses Gerüst:

angular.module('AppliedSiteApp.controllers', []). 
    controller('CarouselCtrl', ['$scope', function($scope) { 
    $scope.nextImage = function() { 
     console.log('hi'); 
    } 
    }]); 

Das erste Argument für controller ist der Name, und das zweite ist ein Array. Im Array definieren Sie, welche Dienste Sie in Ihren Controller einspeisen, und dann definieren Sie die Rückruffunktion mit den injizierten Diensten als Parameter.

Answer 4

Ich stimme den anderen Antworten zu, dass es ein Problem mit Ihrer Verkabelung ist. Versuchen Sie, diese Geige als Beispiel: http://jsfiddle.net/reblace/7fVQR/

Erklären Sie Ihre äußere div wie folgt aus:

<div ng-app="app" ng-controller="MainController"> 

Und dann Ihren Controller wie folgt aus:

var app = angular.module('app', []); 
function MainController($scope) { ... } 

Answer 5

Sind Sie immer noch ein Problem damit zu haben?

Ich lief in das gleiche Problem. Das Problem für mich war, dass der Funktionsname im Controller und in der Ansicht den gleichen Namen hatte wie ein Formular, das ich in derselben Ansicht verwendete.

Die Änderung des Formularnamens oder des Funktionsnamens hat den Fehler für mich behoben.