javascript - 在 AngularJS 中访问脚本内的范围变量

Question

我正在尝试使用 AngularJS 和 TimelineJS3 创建一个简单的应用程序，但我遇到了问题。

我有一个状态(时间线)，其中包含与 Controller 关联的部分 View ( timeline.html )。此状态包含从服务器获取数据的 promise ，该数据将存储在 $scope 中。 Controller 内部的变量。问题是我需要在 <script> 中访问这个变量部分 View 文件中的标记。

代码如下:

app.js

    app.config(['$stateProvider', '$urlRouterProvider', 
      function($stateProvider, $urlRouterProvider){
      .state('timeline', {
        url: '/timelines/:id',
        views: {
          'partial-timeline': {
            templateUrl: 'partial/timeline.html',
            controller: 'TimelineController'
          }
        },
        resolve: {
          getOneTimeline: ['$stateParams','timelineServ', function($stateParams, timelineServ) {
            return timelineServ.getTimelineById($stateParams.id);
          }]
        }
      });
    }]);

    app.controller('TimelineController', ['$scope', 'timelineServ', 
      function($scope, timelineServ) {
      $scope.timelineData = timelineServ.indivTimeline;
    }]);

时间线.html

    {{timelineData}}
    <div id="timeline-embed" style="width: 100%; height: 600px"></div>

    <script type="text/javascript">
      window.timeline = new TL.Timeline('timeline-embed', {{timelineData}});
    </script>

来自{{timelineData}}外面的表达式我可以看到该变量具有正确的数据，但是，正如我所说，我无法在 <script> 内使用它标签。

解决这个问题的最佳方法是什么？我对 AngularJS 还很陌生。

提前谢谢您。最好的问候!

Answer 1

您可以在 Controller 或指令中执行此操作:解决 promise 后，将结果保存在全局窗口变量中并在标记中使用它。

app.controller('TimelineController', ['$scope', 'timelineServ', 
  function($scope, timelineServ) {
  window.timelineData = timelineServ.indivTimeline;
}]);

<script type="text/javascript">
  window.timeline = new TL.Timeline('timeline-embed', window.timelineData);
</script>

请记住，您需要在以某种方式解决 Promise 之后初始化 TL.Timeline。