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?
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.
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.
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.
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.
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) }; });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With