AngularJS: how to inject object into controller?

Question

I know two ways to declare and define controllers in angularjs:

1st way:

myApp.controller('myController', ['$scope', '$uibModal', myController]);

function myController($scope, $uibModal, myObject){
    $scope.params = {};
    $scope.open = function(){
       $uibModal.open({
          templateUrl:'my_dialig.html',
          controller:myDialogController,
          resolve:{
              myObject:function(){
                 return $scope.params;
              }
          }
      });
    }
}

2nd way:

myApp.controller('myController', function($scope, $uibModal){
   $scope.params = {};
   $scope.open = function(){
     $uibModal.open({
        templateUrl:'my_dialog.html',
        controller:myDialogController,
        resolve:{
          myObject:function(){
               return $scope.params;
          }
        }
     });
   }
});

Where I use myObject:

...

myApp.controller('myDialogController', function($uibModalInstance, myObject){
    console.log(myObject);
}
...

this is UI Bootstrap Modal Dialog code, and the object returned from resolve is the data to pass to the dialog scope.

But the problem comes:

the 1st way:

cannot be allowed by AngularJS, because it cannot find the definition of myObject in myDialogController.

the 2nd way:

the value printed in log: 'undefined'.

Is the way I declare and define the controller wrong?(the other parts of the controller code work just ok,though), or is the way myObject passed to controller wrong?(the code to use the controller is from AngularJS UI Bootstrap sample code: “https://angular-ui.github.io/bootstrap/”).

The mistake I make may seem silly, but it matters to me, thanks for poninting it out!

Answer 1

You should create a service or constant to inject into a controller, a constant if your object is constant (duh) and a service if it contains data you need dynamically (functions as values).

so...

myApp.service('myObject', function(){
    return {
        function(){
            ...
        },
        ....
    }
})

or

myApp.constant('myObject', {
   'someKey': 'someValue',
   ...
})

Answer 2

looks like you just want to pass $scope.params to dialog controller. if this is the case you don't need to inject myObject to myController.

myApp.controller('myController', function($uibModal){
   $scope.params = {};
   $scope.open = function(){
     $uibModal.open({
        templateUrl:'my_dialog.html',
        controller:myDialogController,
        resolve:{
          myObject:function(){
             return $scope.params;
          }
        }
     });
   }
});

Answer 3

What is the myObject. Angular injector can only inject the object in angular(like myController, defined by app.controller). So you should turn your myObject to angular object, service or factory is ok.

myApp.service("myObject", function() {
    ...
})

If you want to inject some object by yourself, you can use the $controller like this:

$controller("myController", {myObject: myObject});

here is the documentation: $controller