Funktion ist nicht definiert Fehler in Angularjs

Wenn ich dieses Skript verwenden:Funktion ist nicht definiert Fehler in Angularjs

<script> 
    function TestClick() { 
     alert("Test clic"); 
    } 
</script>

Mit diesem HTML-Code:

<div> 
    <input name="BtnAddNew" type="button" value="Load all OPCVM" onclick="TestClick()" /> 
</div>

Es funktioniert.

Aber sobald ich versuche, alles in einem Controller zu setzen:

<head> 
    <meta name="viewport" content="width=device-width" /> 

    <title>PetitsTests</title> 

    <script src="~/Scripts/jquery-1.10.2.js"></script> 
    <script src="~/Scripts/jquery.unobtrusive-ajax.js"></script> 
    <script src="~/Scripts/angular.js"></script> 

    <script> 
     var myApp= angular.module("myApp", []); 

     myApp.controller('OPCVMViewModel', function ($scope, $http) { 
      function TestClick() { 
       alert("test clic"); 
      } 
     }); 

    </script> 
</head> 

<body ng-app="myApp"> 
    <div ng-controller="OPCVMViewModel"> 
     <input name="BtnAddNew" type="button" value="Load all OPCVM" onclick="TestClick()" /> 
    </div> 
</body>

Dann bekomme ich einen Fehler "TestClick is not defined" ...

Quelle

2017-05-31 John Moe

Hat jemand Ihr Problem gelöst? Wenn ja, könnten Sie bitte die beste Antwort akzeptieren (klicken Sie auf das Häkchen unter den Punkten). Das wird anderen Benutzern helfen, die auf Ihre Frage stoßen, um die akzeptierte Antwort schnell zu finden und es gibt auch 15 Wiederholungen.zeigt auf den Autor (: – Danziger

Beispiel aus dem official docs:

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

myApp.controller('DoubleController', ['$scope', function($scope) { 
    $scope.double = function(value) { return value * 2; }; 
}]);

Kurz gesagt, Sie müssen alle Funktionen oder Eigenschaften, die Sie in Ihrem Controller deklarieren, an $scope anhängen, um sie für Ihre Vorlage verfügbar zu machen/View:

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

app.controller('OPCVMViewModel', function ($scope, $http) { 
    function TestClick() { 
     alert('Test click'); 
    } 

    $scope.TestClick = TestClick; 

    // or: 

    $scope.TestClick = function() { 
     alert('Test click'); 
    }; 
});

Auch als JohnMoe in den Kommentaren darauf hingewiesen hat, gibt in Ihrem Code sind andere Fragen.

Erstens, sollten Sie nicht onclick, aber ng-click verwenden. Sie können die full list of ng directives here finden.

Darüber hinaus ist die controller as Syntax der empfohlene Weg, um von Angular 1.2 zu gehen, obwohl es ohne es funktionieren wird.

Statt etwas zu schreiben wie:

app.controller('FooController', function ($scope) { 
    $scope.property = 'Foo'; 
});

ersetzen Sie $scope für this, und jetzt brauchen Sie nicht $scope zu injizieren und ein schöneres Klassen wie haben suchen Controller:

app.controller('FooController', function() { 
    this.property = 'Foo'; 
});

Ihr Tempel wird wie folgt aussehen:

<div ng-controller="FooController as vm"> 
    {{ vm.property }} 
</div>

Wenn Sie später entscheiden, eine Richtlinie zu erstellen, wird es in etwa so aussehen:

app.controller('FooController', function() { 
    this.property = 'Foo'; 
}); 

app.directive('fooDirective', function() { 
    return { 
     restrict: 'E', 
     controller: 'FooController', 
     controllerAs: 'vm', 
     template: '{{ vm.property }}' 
    }; 
});

Auch könnte man die richtigen ES6 Klassen mit einem Transpiler verwenden. Werfen Sie einen Blick auf this wenn Sie

Quelle

2017-05-31 19:07:12 Danziger

Ich würde upvote, aber 'Controller als 'Syntax sollte zugunsten von $ Scope verwendet werden – mhodges

ich ersetzt meinen Code mit diesem: var myApp = angular.module (" myApp ", []) ; myApp.controller ('OPCVMViewModel' [ '$ scope', function ($ scope) { $ scope.TestClick = function TestClick() { alert ("test clic");} }]); Aber ich bekomme immer noch den gleichen Fehler. –

@JohnMoe Sollte 'ng-click = "..." 'im DOM sein, nicht' onclick = "...". Angular entführt nicht das native onclick Attribut/Funktionalität – mhodges

In Ihrem Controller interessiert sind, versuchen

$scope.TestClick = function(){ alert("test click"); };

Und dann in die Schaltfläche HTML:

type="button" ng-click="TestClick()"

Kurz gesagt, braucht Funktionen im Rahmen definiert werden. und verwenden Sie ng-click, um die Funktion aufzurufen.

Quelle

2017-05-31 19:13:28

Funktion ist nicht definiert Fehler in Angularjs

Antwort

Verwandte Themen