AngularJS pass Javascript object to controller

Question

I'm trying to pass a Javascript object into my AngularJS controller and having no luck.

I've tried passing it into an init function:

<div ng-controller="GalleryController" ng-init="init(JSOBJ)">

And on my controller side:

$scope.init = function(_JSOBJ)
{
    $scope.externalObj = _JSOBJ;
    console.log("My Object.attribute : " + _JSOBJ.attribute );
};

Though the above doesn't seem to work.

Alternatively, I've tried pulling the attribute from the AngularJS controller that I am interested in for use in an inline <script> tag:

var JSOBJ.parameter = $('[ng-controller="GalleryController"]').scope().attribute ;
console.log("My Object.parameter: " + JSOBJ.attribute );

Can anyone tell me: what is the best practice regarding this?

I don't have the option to rewrite the plain Javascript object as it is part of a 3rd party library.

Let me know if I need to provide further clarification and thanks in advance for any guidance!

-- JohnDoe

What is `JSOBJ` when you try and pass it in? `ng-init` thinks `JSOBJ` is already on the `$scope` if you do it that way. — tymeJV, Sep 10 '14 at 13:58
If `JSOBJ` is on the global scope then you can just access it directly in your controller. — rob, Sep 10 '14 at 13:59
@rob You know, I thought that I was able to do it that way. I got a little confused because I started testing this before I included the 3rd party library in my index.html. — krex, Sep 10 '14 at 14:02
@rob True, but the Angular Way would be to inject it as a dependency. — Steve Lang, Sep 10 '14 at 14:13

score 4 · Accepted Answer · answered Sep 10 '14 at 14:08

4

Try setting it as a value:

angular.module('MyApp')
    .value('JSOBJ', JSOBJ);

Then inject it into your controller:

angular.module('MyApp')
    .controller('GalleryController', ['JSOBJ', function (JSOBJ) { ... }]);

answered Sep 10 '14 at 14:08

Steve Lang

539
4
8

score 4 · Answer 2 · edited May 23 '17 at 12:32

Since your object is a part of third-party library you have to wrap it app in something angular.

Your options are:

if it is jquery pluging init'ed for a DOM node etc you can create a directive

example

 myApp.directive('myplugin', function myPlanetDirectiveFactory()      {
   return {
     restrict: 'E',
     scope: {},
     link: function($scope, $element) { $($element).myplugin() }
   }
});

if it is something you need to init you can use factory or service

example

myApp.service(function() {
  var obj = window.MyLib()

  return {
    do: function() {  obj.do() }
  }
})

if it is plain javascript object you can use value

example

myApp.value('planet', { name : 'Pluto' } );

if it is constant ( number, string , etc) you can use constant

example

myApp.constant('planetName', 'Greasy Giant');

Reference to this doc page: https://docs.angularjs.org/guide/providers

Also I strongly encourage you to read answer to this question: "Thinking in AngularJS" if I have a jQuery background?

Did you make a mistake with the example "if it is plain javascript object you can use value" ? — krex, Sep 10 '14 at 14:57
@JohnDoe yes, it was typo it should've been `.value(...)` , fixed answer. — vittore, Sep 10 '14 at 15:37

Vadim · Answer 3 · 2014-09-10T15:05:01.250

If you have JSOBJ accessible via global scope (via window), than you can access it through window directly as in plain JavaScript.

<script>
   ...
   window.JSOBJ = {x:1};
   ...
</script>

Option 1.

<script>
  angular.module('app',[]).controller('ctrl', ['$scope', function($scope) {
    $scope.someObject = window.JSOBJ;
  }]);
</script>

However it makes the controller code not testable. Therefore $window service may be used

Option 2.

<script>
  angular.module('app',[]).controller('ctrl', ['$scope', '$window', function($scope, $window) {
    $scope.someObject = $window.JSOBJ;
  }]);
</script>

If you want to make some abstraction layer to make your controller agnostic for the source from where you get the object, it is recommended to define service which is responsible for fetching value and then inject it to your controllers, directives, etc.

Option 3.

<script>
  angular.module('app',[])
    .service('myService', function() {
      var JSOBJ = ...; // get JSOBJ from anywhere: localStorage, AJAX, window, etc.
      this.getObj = function() {
        return JSOBJ;
      }
     })
    .controller('ctrl', ['$scope', 'myService', function($scope, myService) {
      $scope.someObject = myService.getObj();
    }]);
</script>

Besides of it, for simple values you can define constant or value that may be injected to any controller, service, etc.

Option 4.

<script>
  angular.module('app',[]).
    value('JSOBJ', JSOBJ).
    controller('ctrl', ['$scope', 'JSOBJ', function($scope, JSOBJ) {
      $scope.someObject = JSOBJ;
    }]);
</script>

AngularJS pass Javascript object to controller

3 Answers3