Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you pass parameters to an AngularJS controller on creation?

I have a controller responsible for communicating with an API to update properties of a user, name, email, etc. Each user has an 'id' which is passed from the server when the profile page is viewed.

I would like to pass this value to the AngularJS controller so it knows what the API entry point is for the current user. I've tried passing the value in ng-controller. For example:

function UserCtrl(id, $scope, $filter) {  $scope.connection = $resource('api.com/user/' + id) 

and in the HTML

<body ng-controller="UserCtrl({% id %})"> 

where {% id %} print the id sent from the server. but I get errors.

What is the correct way to pass a value into a controller on its creation?

like image 439
nickponline Avatar asked Jan 25 '13 14:01

nickponline


People also ask

Can you create controller in AngularJS?

AngularJS ControllersAngularJS applications are controlled by controllers. The ng-controller directive defines the application controller. A controller is a JavaScript Object, created by a standard JavaScript object constructor.

How pass data from controller controller to AngularJS?

Approach: To share data between the controllers in AngularJS we have two main cases: Share data between parent and child: Here, the sharing of data can be done simply by using controller inheritance as the scope of a child controller inherits from the scope of the parent controller.

Which is the correct syntax of creating AngularJS controller?

13) Which of the following syntax is used to create a module in AngularJS? Answer: C is the correct option. To create a module in AngularJS, we use angular. module("app", []); syntax.

Can we have two controllers in AngularJS?

Angular creates one $scope object for each controller. We also have a $rootScope accessible from every controllers.In case of multiple controllers AngularJS framework creates and pass a different $scope object to each controller so that data and methods of one controller not be accessed in another controller.


1 Answers

Notes:

This answer is old. This is just a proof of concept on how the desired outcome can be achieved. However, it may not be the best solution as per some comments below. I don't have any documentation to support or reject the following approach. Please refer to some of the comments below for further discussion on this topic.

Original Answer:

I answered this to Yes you absolutely can do so using ng-init and a simple init function.

Here is the example of it on plunker

HTML

<!DOCTYPE html> <html ng-app="angularjs-starter">   <head lang="en">     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>     <script src="app.js"></script>   </head>     <body ng-controller="MainCtrl" ng-init="init('James Bond','007')">     <h1>I am  {{name}} {{id}}</h1>   </body> </html> 

JavaScript

var app = angular.module('angularjs-starter', []);  app.controller('MainCtrl', function($scope) {    $scope.init = function(name, id)   {     //This function is sort of private constructor for controller     $scope.id = id;     $scope.name = name;      //Based on passed argument you can make a call to resource     //and initialize more objects     //$resource.getMeBond(007)   };   }); 
like image 115
Jigar Patel Avatar answered Oct 25 '22 12:10

Jigar Patel