Angularjs .Umfang() ist undefiniert, wenn der Aufruf von <script> - tag
Arbeiten mit Angularjs zum ersten mal.
MVC 4,
VS 2012
Habe ich eine Winkel-Funktion (AddRealTimeAlert) die können eine Warnung (schön formatiert div...nicht ein generisches js-alert-box) werden dem Benutzer angezeigt. Wenn die Funktion aufgerufen wird, mithilfe der Schaltfläche (siehe unten html, #addAlertButton), die Funktion funktioniert perfekt. Jedoch, wenn die Funktion aufgerufen wird, die von einem script-tag von der gleichen html-Datei oder eine andere html-Datei, die Sie bricht. Speziell, eckig.element(alertsController).Umfang() den Wert null zurück. Jedoch eckig.element(alertsController) nicht null zurück; es gibt die div. So, der Rahmen () - Methode scheint nicht zu funktionieren, es sei denn, es wird aufgerufen durch klicken auf die Schaltfläche. Gedanken?
HTML (_Alerts.cshtml):
<div id="alertsDiv">
<div ng-controller="AlertsCtrl" id="alertsController">
<div ng-repeat="alert in alertBasket.alerts()" class="alert-box radius {{alert.type}}">{{alert.message}}</div>
<button class="btn" onclick="AddRealTimeAlert('my second alert!', 'success');" id="addAlertButton">Add Alert</button> //Clicking this does work!!
</div>
</div>
<script>
AddRealTimeAlert("my first alert!", "success"); //This does not work!!
</script>
JS (alerts.js):
var alertModule = angular.module('rs-customer-portal', []);
alertModule.factory('alertBasket', function () {
var alerts = [];
var alertService = {};
alertService.addAlert = function (alert) {
alerts.push(alert);
};
alertService.alerts = function () {
return alerts;
};
return alertService;
});
function AlertsCtrl($scope, alertBasket) {
$scope.newAlert = {};
$scope.alertBasket = alertBasket;
$scope.msg = "my message";
}
function AddRealTimeAlert(newMessage, newType) {
var newAlert = { message: newMessage, type: newType };
alertsController = $('#alertsController');
var scope = angular.element(alertsController).scope();
scope.$apply(function () {
scope.alertBasket.addAlert(newAlert);
})
}
Layout-Datei, Auszug(_Layout.cshtml):
<head>
<script type="text/javascript" src="~/_assets/RadioShack/lib/Angular/angular.js"></script>
<script type="text/javascript" src="~/_assets/RadioShack/js/alerts.js"></script>
</head>
<body>
@{ Html.RenderPartial("_Alerts"); }
</body>
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich würde sagen, Ihr in-Seite
<script>
kommt, bevor Ihr<script src="angular.js">
. Stellen Sie sicher, angular.js wird zuerst geladen, und dann Ihre JS-Datei und schließlich Ihre in-Seite Skript.Andere Ursache könnte sein, dass Sie sicher, dass Eckig nicht fertig geladen ist alles, wenn Ihr in-page-Skript ausgeführt wird. Es ist möglich, dass Ihr Anruf wird aufgerufen, bevor eine Eckige hat, besichtigt den DOM und erstellte Bereiche und controller. Versuchen Sie dies:
console.log("in-page script")
AlertsCtrl
fügen Sieconsole.log("loading controller")
Die richtige Reihenfolge sollte sein:
Wenn es nicht ist, dann gibt es eine Ladereihenfolge-problem. Lassen Sie mich das Ergebnis wissen und ich werde versuchen zu helfen...
Angular Ready
Veranstaltung. Ich habe irgendwo gelesen, dass, wenn Sie$timeout
, wenn das dann eckig ist bereit es wird dabei dessen in der Warteschlange $timeouts. Aber warum verwenden Sie ein in-page-Skript? Können Sie nicht finden, einen deutlichen Winkel-Ereignis, wenn Sie wollen, dass dies geschieht, wie "nachdem der controller geladen wurde" oder "nach der schrägdurchstrahlung wurde geladen"?$rootScope
zu halten IhrealertBasket
. Auf diese Weise könnten SiemyModule.run(function($rootScope){ $rootScope.alertBasket.addAlert(newAlert); })
in Ihre Seite ein Skript. So zu tun, sorgt dafür, dass alles geladen ist, bevor der code ausgeführt wird. Markup wäre dann binden Sie die alerts-Liste, um$rootScpope. alertBasket
statt zu den controller-Bereich.angular.element().ready()
(docs.angularjs.org/api/angular.element). Ich denke immer noch, es ist besser, wenn Sie eine andere Lösung finden, aber wollte ich korrigiere meine Aussage.Stellen Sie sicher, dass Sie nicht deaktiviert die debug-Informationen auf Ihrer app:
Gemäß der Dokumentation ausgeführt haben, deaktivieren Sie die debug-info schränkt den Zugriff auf die .Umfang () - Funktionen.
Sehen:
https://docs.angularjs.org/guide/production#disabling-debug-data