AngularJS: passe l'objet de la directive au contrôleur

Dans ma directive, je crée un objet.

J'aimerais passer cet objet à la portée du contrôleur que je associe à la directive. Comment je fais ça?

Gardez à l'esprit qu'il s'agit d'un code isolé pour que vous compreniez le problème. Dans le problème réel, il ne sera pas utile d'instancier cet objet à l'intérieur du contrôleur.

Je sais que l'objet scope dans la directive est destiné à transmettre des valeurs spécifiées dans le HTML, je l'ai écrit de cette façon pour vous aider à comprendre ce que j'essaie de faire.

angular.module('test', []) .controller('test', ['$scope', function($scope) { alert($scope.obj); //Needs to contain {value: 'bla'} }]) .directive('pTest', ['$compile', function($compile) { var object = {value: 'bla'}; return { scope: { obj: object //how can I do that? }, controller: 'test' }; }]);

Vous pouvez le faire dans la fonction de lien de la direction. Comme vous souhaitez définir la valeur sur la portée, vous pouvez utiliser le paramètre de portée de la fonction de lien. Vous pouvez également définir l'objet sur le contrôleur, car le quatrième argument (facultatif) de la fonction de liaison est le contrôleur de la directive.

 .directive('pTest', ['$compile', function($compile) { var object = {value: 'bla'}; return { controller: 'test', link: function(scope, elements, attrs, controller) { scope.obj = object; // or controller.obj = object; } }; }]);

Maintenant, supposons que vous ne souhaitez pas isoler votre champ d'application en utilisant un membre de la «portée» dans le retour de votre directive. De votre exemple, je ne pense pas que vous voulez vraiment une portée isolée. (Indépendamment, la fonction de lien fonctionnerait là aussi).

Vous pouvez avoir deux solutions

Solution 1: utiliser '=' dans une portée isolée, elle lie une propriété de portée locale / directive à une propriété de portée parentale.

  .directive('ptest', ['$compile', function($compile) { var object = {value: 'changed value'}; return { scope: { iobj:"=" }, template : "<div>{{iobj.value}}<div>", link: function(scope,elem,attr){ scope.iobj=object ; } }; }]);

En html

  <div ng-controller="testCtrl"> <div ptest iobj="object"></div> </div>

Solution 2: utilisez le service $ controller et faites de testCtrl comme parent et copiez tout son champ d'application à la portée des contrôleurs

 .directive('ptest', ['$compile', function($compile,$controller) { var object = {value: 'changed value'}; return { controller:function($scope,$controller){ $controller('testCtrl', {$scope: $scope}); console.log($scope.object.value); $scope.object = object; } }; }]);

Exemple de travail pour '=' solution 1:

 angular.module('test',[]) .controller('testCtrl',function($scope){ $scope.object = {value:'intial value'}; }) .directive('ptest', ['$compile', function($compile) { var object = {value: 'changed value'}; return { //replace:true, scope: { iobj:"=" }, template : "<div>{{iobj.value}}<div>", link: function(scope,elem,attr){ scope.iobj=object ; } }; }]);

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="test" ng-controller="testCtrl"> {{object.value}} <div ptest iobj="object"></div> </div>