AngularJS pass Javascript object to controller - Stack Overflow

admin管理员组

文章数量:1296388

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

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

• javascript
• angularjs

Share Improve this question Follow asked Sep 10, 2014 at 13:55 krexkrex 34533 gold badges88 silver badges2121 bronze badges 4

• 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 Commented Sep 10, 2014 at 13:58
• 1 If JSOBJ is on the global scope then you can just access it directly in your controller. – rob Commented Sep 10, 2014 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 Commented Sep 10, 2014 at 14:02
• @rob True, but the Angular Way would be to inject it as a dependency. – Steve Lang Commented Sep 10, 2014 at 14:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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) { ... }]);

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/guide/providers

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

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 remended 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 controllerStack Overflow