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

Question

我的控制器:

$scope.totals = totals;

我的模板(按照预期的html注入工作):

{{totals}}

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

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

我试过$scope.totals,$totals,{{totals}},等等,无果.我很感激任何见解,谢谢!

编辑:

以下是我的控制器和模板的jsfiddle.在模板内部我想插入一个使用该$scope.totals变量的脚本.

http://jsfiddle.net/38CrC/

Answer 1

首先,AngularJS背后的想法是喜欢这样的情况.

就AngularJS而言,您可能最好重新考虑您的应用程序并使用指令来封装您当前在脚本标记中编写的代码.

但是,话虽如此,有一种方法可以访问这样的范围:

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

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

您可以阅读文档以获取更多详细信息.

但如上所述,在大多数情况下,这不是推荐的做法.

希望有所帮助!

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

希望有所帮助!

Answer 2

OP答案：

我最终不得不使用指令来找到我想要的值。在设置我想要使用的值的控制器中，我添加了一个指令，使其看起来像这样：

'use strict';

angular.module('AdminApp')
  .controller('AdminEventsCtrl', function ($scope, collection) {
    $scope.totals = collection;
  }).directive('foo', function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attrs){
            //Use scope.totals here
        }
    }
});

在我的模板中，我有这样的声明：

<div foo></div>

这使我能够利用变量总计来完成我需要的操作。

特别感谢@jvandemo 帮助我得出这个答案。