在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>