角度:从<脚本>标记内访问范围

Angular: Access scope from within <script> tag

本文关键字：范围 访问 脚本 角度      更新时间：2023-09-26

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

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

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

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

推荐的方法是什么？这不是一个很普遍的问题吗？

具体来说，我试图使用javascript图形库Cytoscape.js。图形是从 JavaScript 对象填充的。我想从范围填充这个 javascript 对象。我发现这个：

将 Angular 范围变量传递给 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>
否则，根据需要

使用插值，将使用控制器的值创建一个隐藏的输入，并使用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>

无论如何，让我们说它不会是 角度的工作方式 ，但由于我不知道它的发展范围是什么，这是我能告诉你的最好的。

相关文章：