javascript - Angular : Access scope from within <script> tag

标签 javascript angularjs angularjs-scope

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

我需要将范围传递到脚本文件中。

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

从我到目前为止所看到的来看,对于相对简单的东西来说,它似乎过于复杂。

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

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

Pass Angular scope variable to Javascript

我想知道这通常是否以不同的方式处理,因为它看起来像是一个黑客。

最佳答案

首先要明确的是,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>

否则,根据需要使用插值,将使用 Controller 的值创建一个隐藏输入,并使用普通的 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 Way 的工作方式,但由于我不知道它的开发范围,这是我能告诉你的最好的信息。

关于javascript - Angular : Access scope from within &lt;script&gt; tag,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35186838/

相关文章:

javascript - 没有类名 jquery 选择器

javascript - 客户端 HTML 清理有多安全?

javascript - 使用 Angular 间隔定时器功能

node.js - 运行 "npm ERR!"时有很多 `yo angular`

jquery - 在链接函数中将 css 设置为 $templateCache.get() html

javascript - 我什么时候应该调用 $digest 而不是 $apply?

javascript - Ionic-AngularJS : Emitting Event To Parent Only ReBroadcasts To Child That Emitted Event

javascript - 在 typeahead.js 中使用预取过滤器(使用基本选项)

javascript - PHP/JS Ajax _POST 数组未发布

javascript - 这个javascript代码有什么问题,在IE中获取 "Operation aborted"?