Question

第一次使用Angularjs。 MVC 4， VS 2012

我有一个角度函数（AddRealTimeAlert），它可以添加一个警告（格式很好的div ...而不是通用的js警告框）以显示给用户。如果使用按钮调用该函数（请参阅下面的html，＃addAlertButton），该函数可以正常工作。但是，如果函数是由同一个html文件或不同的html文件中的脚本标记调用的，则会中断。具体来说，angular.element（alertsController）.scope（）返回null。但是，angular.element（alertsController）不返回null;它返回div。因此，除非通过单击按钮调用，否则scope（）方法似乎不起作用。想法？

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.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>

Answer 1

确保您未在应用上停用调试信息：

$compileProvider.debugInfoEnabled(false)

根据文档，禁用调试信息会限制对.scope（）函数的访问。看到这个： https://docs.angularjs.org/guide/production#disabling-debug-data

Answer 2

我会说你的页内<script>位于<script src="angular.js">之前。确保首先加载angular.js，然后加载你的JS文件，最后加载你的页内脚本。

另一个原因可能是当页面内脚本运行时，Angular肯定没有完成加载。在Angular检查DOM并创建范围和控制器之前，可能会调用您的调用。试试这个：

，添加console.log("in-page script")
在AlertsCtrl中添加console.log("loading controller")
加载页面并检查控制台

正确的顺序应该是：

loading controller
in-page script

如果不是，则存在装货订单问题。让我知道结果，我会尽力帮助...

从<script>标记</script>调用时，Angularjs .scope（）未定义

2 个答案: