¿Puedes pasar parámetros a un controlador AngularJS durante la creación?
Tengo un controlador responsable de comunicarme con una API para actualizar las propiedades de un usuario, nombre, correo electrónico, etc. Cada usuario tiene un archivo 'id'que se pasa desde el servidor cuando se ve la página de perfil.
Me gustaría pasar este valor al controlador AngularJS para que sepa cuál es el punto de entrada de la API para el usuario actual. Intenté pasar el valor en ng-controller. Por ejemplo:
function UserCtrl(id, $scope, $filter) {
$scope.connection = $resource('api.com/user/' + id)
y en el HTML
<body ng-controller="UserCtrl({% id %})">
donde {% id %}imprimir la identificación enviada desde el servidor. pero me salen errores.
¿Cuál es la forma correcta de pasar un valor a un controlador en el momento de su creación?
Notas:
Esta respuesta es vieja. Esto es sólo una prueba de concepto sobre cómo se puede lograr el resultado deseado. Sin embargo, puede que no sea la mejor solución según algunos comentarios a continuación. No tengo ninguna documentación que respalde o rechace el siguiente enfoque. Consulte algunos de los comentarios a continuación para obtener más información sobre este tema.
Respuesta original:
Respondí a esto Sí, absolutamente puedes hacerlo usando ng-inituna función de inicio simple.
Aquí está el ejemplo en 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)
};
});
Llegué muy tarde a esto y no tengo idea si es una buena idea, pero puede incluir el $attrsinyectable en la función del controlador permitiendo que el controlador se inicialice usando "argumentos" proporcionados en un elemento, por ejemplo
app.controller('modelController', function($scope, $attrs) {
if (!$attrs.model) throw new Error("No model for modelController");
// Initialize $scope using the value of the model attribute, e.g.,
$scope.url = "http://example.com/fetch?model="+$attrs.model;
})
<div ng-controller="modelController" model="foobar">
<a href="{{url}}">Click here</a>
</div>
Nuevamente, no tengo idea si es una buena idea, pero parece funcionar y es otra alternativa.
Esto también funciona.
JavaScript:
var app = angular.module('angularApp', []);
app.controller('MainCtrl', function($scope, name, id) {
$scope.id = id;
$scope.name = name;
// and more init
});
HTML:
<!DOCTYPE html>
<html ng-app="angularApp">
<head lang="en">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="app.js"></script>
<script>
app.value("name", "James").value("id", "007");
</script>
</head>
<body ng-controller="MainCtrl">
<h1>I am {{name}} {{id}}</h1>
</body>
</html>
