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

How to access AngularJS variable from template script

本文关键字：访问 AngularJS 变量 脚本      更新时间：2023-09-26

我的控制器：

$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/

首先，AngularJS背后的想法是避免类似的情况。

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

然而，也就是说，有一种方法可以访问这样的范围：

var $element = $('#elementId');
var scope = angular.element($element).scope();

您可以阅读文档以了解更多详细信息。

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

希望能有所帮助！

<小时>

OP发布jsFiddle:后更新

为了方便您，我在http://jsfiddle.net/jvandemo/hYnBa/1/

由于您的示例有一个带有ng-controller属性的简单div，因此您可以访问如下范围：

<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

希望能有所帮助！

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帮助我找到这个答案。

相关文章：