在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

您可以在控制器或指令中执行此操作：兑现承诺后，将结果保存在全局窗口变量中并在标记中使用它。

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>