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>
InformationsquelleAutor scottndecker | 2013-07-24
Schreibe einen Kommentar