Angular：从 <script> 标签内访问范围答案

【问题标题】：Angular: Access scope from within <script> tagAngular：从 <script> 标签内访问范围
【发布时间】：2018-08-11 05:12:38
【问题描述】：

我有一个从我的 API 填充的范围变量。我可以使用 {{}} 大括号从 HTML 访问它。

我需要将作用域传递到脚本文件中。

<script type="text/javascript"> var data = {{data}}  </script>

从我目前看到的情况来看，相对简单的事情似乎过于复杂。

推荐的方法是什么？这不是很常见的问题吗？

具体来说，我正在尝试使用 javascript 图形库 Cytoscape.js。该图由 javascript 对象填充。我想从范围内填充这个 javascript 对象。我发现了这个：

Pass Angular scope variable to Javascript

我想知道这是否通常以不同的方式在角度处理，因为它看起来像一个 hack。

【问题讨论】：

这是一个很好的例子，首先解释你想要做什么，而不是仅仅寻找答案。您所描述的内容看起来像是一个错误的问题，一个正确的答案。
如果我正确理解“我可以使用 {{}} 大括号从 HTML 访问它”表示 Angular 正在用您想要的数据填充这些卷曲，那么没有理由尝试要通过脚本标签写回相同的数据，只需将其从任何指令或控制器中的任何指令或控制器传递给 cytoscape。
当我想到这样做的“角度方式”时，我会使用服务/工厂来存储来自 API 调用的数据，然后将服务/工厂注入我想要的控制器中，然后将数据调用到控制器中
澄清一下，我有一个将数据返回到工厂的 api，该工厂是从控制器调用的并且工作正常。问题是 HTML 中的花括号可以访问范围，但 JavaScript 中的花括号无法访问范围。显然 Angular 不会解析脚本标签中的任何内容。

标签： javascript angularjs angularjs-scope

【解决方案1】：

首先要明确的是，Angular 不会在脚本标签内执行插值。

https://docs.angularjs.org/guide/interpolation

有一些方法围绕这个...直接调用变量的值可以是其中一种方法：

<body ng-app="myApp">
    <div ng-controller="myController" id="yourControllerElementID">

    </div>
</body>

<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("myController", myController);

    function myController($scope){
        $scope.data = 'some value';
    }

    // Capturing value from outside the controller
    setTimeout(function(){
        var data = angular.element(document.getElementById('yourControllerElementID')).scope().data;
    }, 1000);
</script>

否则根据需要使用插值，将使用控制器的值创建一个隐藏输入，并使用 vanilla javascript 或 jquery 捕获此值：

<body ng-app="myApp">
    <div ng-controller="myController">
        <input type="hidden" id="myValueFromController" value="{{data}}" />
    </div>
</body>

<script type="text/javascript">
    var app = angular.module("myApp", []);

    app.controller("myController", myController);

    function myController($scope){
        $scope.data = 'some value';
    }

    // Capturing value from outside the controller
    setTimeout(function(){
        var data = document.getElementById("myValueFromController").value;  // or
        var data = $("#myValueFromController").val();
    }, 1000); 
</script>

无论如何，假设它不是 Angular 的工作方式，但由于我不知道它的开发范围，这是我能告诉你的最好的。

【讨论】：

第一种方法对我不起作用。无法读取未定义的属性“数据”
第二种方法给出 {{data}} 作为结果而不是“一些价值”。
你是对的。这两种情况都失败了，因为 Angular 没有时间采取行动。我将添加一个 setTimeout 并更新响应。