CODEWITHSUNDEEP
javascriptangularjs
krex
krex

Reputation: 345

AngularJS pass Javascript object to controller

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

Upvotes: 2

Views: 5898

Answers (3)

vittore
vittore

Reputation: 17589

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?

Upvotes: 4

Vadim
Vadim

Reputation: 8789

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>

Upvotes: 1

Steve Lang
Steve Lang

Reputation: 559

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

Upvotes: 4

Related Questions