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

How to access AngularJS variable from template script

提问by reagan

My controller:

我的控制器：

$scope.totals = totals;

My template (works as expected for html injection):

我的模板（对于 html 注入按预期工作）：

{{totals}}

But what I need is to access the variable totalsin a script in the template, like so:

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

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

I've tried $scope.totals, $totals, {{totals}}, etc, with no avail. I would appreciate any insight, thanks!

我试过$scope.totals, $totals,{{totals}}等，但无济于事。我将不胜感激任何见解，谢谢！

EDIT:

编辑：

The following is a jsfiddle of my controller and template. Inside of the template I'm wanting to insert a script that uses the $scope.totalsvariable.

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

http://jsfiddle.net/38CrC/

http://jsfiddle.net/38CrC/

采纳答案by reagan

OP Answer:

OP 答案：

I ended up having to use a directive to find the value I wanted. In the controller that set the value I wanted to use I added a directive so that it looked like this:

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

'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
        }
    }
});

In my template I had the declaration:

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

<div foo></div>

This gave me the ability to do what I needed with the variable totals.

这使我能够对变量总数做我需要的事情。

Special thanks to @jvandemo for helping me arrive at this answer.

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

回答by jvandemo

First of all, the idea behind AngularJS is to avond situations like that.

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

In terms of AngularJS you woud probably be better off rethinking your application and use a directive to encapsulate the code you are currently writing in the script tags.

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

However, that being said, there is a way to access a scope like this:

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

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

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

You can read the documentationfor more details.

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

But as said, it is not a recommended practice in most cases.

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

Hope that helps!

希望有帮助！

---

---

Update after OP posted jsFiddle:

OP 发布 jsFiddle 后更新：

I created a working jsFiddle for your convenience at http://jsfiddle.net/jvandemo/hYnBa/1/

为了您的方便，我在http://jsfiddle.net/jvandemo/hYnBa/1/创建了一个有效的 jsFiddle

Since your example has a simple divwith an ng-controllerattribute, you can access the scope like this:

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

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

Here's what happens:

这是发生的事情：

• You select the element (in this case by using jQuery)
• You wrap the element as an AngularJS element (exposing extra methods on the element)
• You call the scope()method on the element
• You can then access the scope properties e.g. scope.totals

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

Hope that helps!

希望有帮助！