从<；调用Angularjs.scope（）时未定义；脚本>；标签_Angularjs_Scope_Angularjs Scope

从<；调用Angularjs.scope（）时未定义；脚本>；标签

angularjs

从<；调用Angularjs.scope（）时未定义；脚本>；标签,angularjs,scope,angularjs-scope,Angularjs,Scope,Angularjs Scope,第一次与Angularjs合作。 MVC4， VS 2012 我有一个角度函数（AddRealTimeAlert），它可以添加一个警报（格式很好的div…不是一个通用的js警报框）来显示给用户。如果使用按钮调用该函数（请参见下面的html，#addAlertButton），则该函数工作正常。但是，如果该函数由来自同一html文件或不同html文件的脚本标记调用，则该函数将中断。具体来说，angular.element（alertsController.scope（）返回null。但是，angul

第一次与Angularjs合作。 MVC4， VS 2012

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

HTML（\u 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>

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>


@{Html.RenderPartial（“_警报”）；}

我想说，你在

页面中的位置在你的

之前。确保首先加载angular.js，然后加载js文件，最后加载页面脚本

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

在页面块中，添加

console.log（“在页面脚本中”）

在

AlertsCtrl

中，添加

console.log（“加载控制器”）

加载页面并检查控制台

正确的顺序应该是：

loading controller
in-page script

如果不是，则存在装载顺序问题。让我知道结果，我会尽力帮助…

确保您没有禁用应用程序上的调试信息：

$compileProvider.debugInfoEnabled(false)

根据文档，禁用调试信息会限制对.scope（）函数的访问。见此：

谢谢您的回复！我也有类似的想法。在问题中添加了布局html。如您所见，我首先加载angular.js，然后加载alerts.js，最后加载部分（_alerts.cshtml）时将调用页面内脚本。我们在这里讨论了一些问题……顺序不正确：即“页面内脚本”然后“加载控制器”。思想？刚刚添加了$（document）.ready（function（）{…}关于页面内脚本，这就解决了它。这是一个好的做法吗？我认为DOM就绪在这里是不安全的。DOM可能已经就绪，但这并不意味着angular已经完成了对DOM的处理。没有

angular ready

事件。我在某个地方读到，如果使用

$timeout

，那么angular就绪后，它将处理其排队的$timeouts。但是为什么要使用这样的页面内脚本呢？当您希望发生诸如“控制器加载后”或“角度视图加载后”之类的重要角度事件时，您难道找不到该事件吗？我们希望能够（a）在页面加载时加载警报，（b）根据页面上发生的情况显示警报（即，用户填写表单时，他们将字段弄乱，或者他们正在查看购物车，但他们购买的商品刚刚售罄）。我们希望立即抛出警报，而不是等待发回。因此，任何抛出错误的事件都有可能发生在angularjs已经加载之后，但最好能以某种方式保证这一点。可能对作用域调用执行某种重试策略（即，如果scope==null，请稍等片刻，然后重试）？我在前面写道“没有Angular Ready事件”。我错了；有

Angular.element（）.Ready（）

（）。我仍然认为如果你能找到另一个解决方案会更好，但我想更正我的说法。