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

Answer 1

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) { ... }]);

Answer 2

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?

Answer 3

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>