current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite
2

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

share|improve this question
3  
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
1  
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. – JohnDoe 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
up vote 3 down vote accepted

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) { ... }]);
share|improve this answer
up vote 3 down vote

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: How do I "think in AngularJS" if I have a jQuery background?

share|improve this answer
    
Did you make a mistake with the example "if it is plain javascript object you can use value" ? – JohnDoe 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
up vote 1 down vote

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>
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.