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

您可以在控制器或指令中执行此操作：在解析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>

请记住，在以某种方式解决了承诺之后，您需要初始化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中的脚本内访问范围变量

2 个答案: