javascript - 如何从模板脚本访问 AngularJS 变量

Question

我的 Controller :

$scope.totals = totals;

我的模板(对于 html 注入(inject)工作正常):

{{totals}}

但我需要的是在模板的脚本中访问变量 totals，如下所示:

<script>
  var totals = ????;
  // do stuff with totals
</script>

我已经尝试了 $scope.totals、$totals、{{totals}} 等，但都无济于事。我将不胜感激任何见解，谢谢!

编辑:

以下是我的 Controller 和模板的 jsfiddle。在模板中，我想插入一个使用 $scope.totals 变量的脚本。

http://jsfiddle.net/38CrC/

Answer 1

首先，AngularJS 背后的想法是避免这样的情况。

就 AngularJS 而言，您最好重新考虑您的应用程序并使用指令将您当前正在编写的代码封装在脚本标记中。

然而，话虽如此，还是有一种方法可以像这样访问范围:

var $element = $('#elementId');

var scope = angular.element($element).scope();

您可以阅读 documentation了解更多详情。

但如前所述，在大多数情况下这不是推荐的做法。

希望对您有所帮助!

---

OP 发布 jsFiddle 后更新:

为方便起见，我在 http://jsfiddle.net/jvandemo/hYnBa/1/ 创建了一个可用的 jsFiddle

由于您的示例有一个简单的 div 和一个 ng-controller 属性，您可以像这样访问范围:

<script>
    $(document).ready(function(){
        var $element = $('div[ng-controller="AdminEventsCtrl"]');
        var scope = angular.element($element).scope();
        console.dir(scope);
    });
</script>

这是发生了什么:

• 您选择元素(在本例中使用 jQuery)
• 将元素包装为 AngularJS 元素(在元素上公开额外的方法)
• 您在元素上调用 scope() 方法
• 然后您可以访问范围属性，例如scope.totals

希望对您有所帮助!