Access scope variable inside script in AngularJS

Question

I'm trying to create a simple application using AngularJS and TimelineJS3 but I'm having a problem with it.

I have a state (timeline) which contains a partial view (timeline.html) associated with a controller. This state contains a promise to fetch data from the server, which is going to be stored in the $scope variable inside the controller. The problem is that I need to access this variable inside a <script> tag in the partial view file.

Here's the code:

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>

From the {{timelineData}} expression outside I can see that the variable has the correct data however, as I said, I'm not able to use it inside the <script> tags.

What is the best approach to solve this problem? I'm quite new to AngularJS.

Thank you in advance. Best Regards!

something like this needs to be intialized in a directive so that element exists when code is run — charlietfl, Oct 27 '15 at 18:44
You can get a reference to the scope via `var scope = angular.element(elementInsideTheControllerScope).scope()` - then access your variable: `scope.timelineData` — tymeJV, Oct 27 '15 at 18:48
using it like this `var scope = angular.element('div[ng-controller="TimelineController"]').scope()` and then accessing `scope.timelineData` I get that the data is undefined. Although, when logging the scope to the console, it contains a timelineData field with the correct data! — , Oct 27 '15 at 19:12

score 0 · Answer 1 · answered Oct 27 '15 at 23:36

You can do this in the controller OR the directive: after the promise is resolved, save the result on a global window variable and use that in your tag.

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>

Remember that you need to initialze the TL.Timeline after the promise has been resolved in some way.

Thank you for your answer but, as I apply it, I'm getting that the data is `undefined`! — , Oct 28 '15 at 10:34

score 0 · Accepted Answer · answered Oct 29 '15 at 14:05

I managed to make it work :)

On app.js, the code related to the definition of the state timeline remained the same. Additionally, I created a new directive:

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

And modified the controller to look like this:

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

Then, in the html file for the partial view (timeline.html), I just inserted the new directive:

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

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

Access scope variable inside script in AngularJS

2 Answers2