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

Question

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

我有一个状态 (timeline)，其中包含与控制器关联的部分视图 (timeline.html)。此状态包含从服务器获取数据的承诺，这些数据将存储在控制器内的 $scope 变量中。问题是我需要在部分视图文件的 <script> 标记内访问此变量。

代码如下：

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

timeline.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

您可以在控制器或指令中执行此操作：在解决承诺后，将结果保存在全局 window 变量中并在您的代码中使用它。

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>

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

Answer 2

我成功了:)

在app.js上，与状态时间轴定义相关的代码保持不变。此外，我创建了一个新指令：

app.directive('runTimelineScript', function() {
  return {
    restrict: 'E',
    link: function (scope, element, attr) {
      window.timeline = new TL.Timeline('timeline-embed', timelineData);
    }
  };
});

并将控制器修改为如下所示：

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

然后，在部分视图的 html 文件中 (timeline.html)，我刚刚插入了新指令：

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

<run-timeline-script></run-timeline-script>

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

Access scope variable inside script in AngularJS

javascript

angularjs

timeline.js

angular-ui-router