How to transfer data from a controller to a directive?

Question

Greetings

Please tell me how to transfer data from a controller to a directive using the syntax controller as

For example:

 angular .module('test', []) .controller('first', function () { this.somevar = 'Lorem'; // -> Эту переменную }) .directive('one', function () { restrict: 'A', link: function () { console.log(somevar); // <- Получить здесь } });

a bunch of options, starting with the transfer in the markup, and ending with the receipt of the Osprey
@Grundy, I would be happy to have a couple of options or a link with them)
@KonstantinOkhotnick, I need not to display, but to send for further use)

Accepted Answer · 2017-03-09T16:01:57

Such implicit dependencies are evil.
These are like global variables, only worse.
The directive should not depend on the controller.
It should be painlessly easy to move to another place.

Option 1 (so-so): A default value is added to each variable from the external scope inside the directive. It turns out something like% ENV% environment. All data is available anywhere, but the external controller can override some of them.

 angular .module('test', []) .controller('first', ['$scope', function ($scope) { $scope.somevar = 'Lorem'; }]) .directive('one', function() { var defaults = { somevar: 'Ipsum', othervar: 'Dolor' }; return { restrict: 'A', link: function(scope) { var params = {}; Object.keys(defaults).forEach(key => params[key] = scope[key] || defaults[key] ); console.log(params.somevar, params.othervar) ; } }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="test" ng-controller="first as c"> <div one></div> </div>

Option 2: The isolated scope of the directive, all relevant information is passed through attributes.

 angular .module('test', []) .controller('first',['$scope', function ($scope) { this.somevar = 'Lorem'; }]) .directive('one', function() { return { restrict: 'A', scope: {text: '='}, link: function(scope) { console.log(scope.text) } }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="test" ng-controller="first as c"> <div one text="c.somevar"></div> </div>

Option 3: Services are used for data exchange.

 angular .module('test', []) .controller('first', ['dataProvider', function (data) { data.set('somevar', 'Lorem'); }]) .service('dataProvider', function() { var data = {}; this.set = function(key, val){data[key] = val;}; this.get = function(key) {return data[key];}; }) .directive('one', ['dataProvider', function(data) { return { restrict: 'A', scope: {}, link: function() { console.log(data.get('somevar')) } }; }]);

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="test" ng-controller="first as c"> <div one></div> </div>

Add an example for the first option, I do not understand what you mean

Answer 2 · 2017-03-09T15:30:57

For example:

 var myApp = angular.module('myApp',[]); myApp.directive('one', function() { return { restrict: 'A', link: function (scope) { console.log(scope.somevar); // <- Получить здесь }, }; }); myApp.controller('MyCtrl', function ($scope) { $scope.somevar = 'Lorem'; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="MyCtrl"> <div one></div> </div>

Another option:

 angular .module('test', []) .controller('first',['$scope', function ($scope) { $scope.somevar = 'Lorem'; }]) .directive('one', function() { return { restrict: 'A', link: function (scope) { console.log(scope.somevar) }, }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="test" ng-controller="first"> <div one></div> </div>

And 1 more option

 angular .module('test', []) .controller('first',['$scope', function ($scope) { this.somevar = 'Lorem'; }]) .directive('one', function() { return { restrict: 'A', controller: 'first', link: function(scope, element, attrs, ctrl) { console.log(ctrl.somevar) } }; });

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="test" ng-controller="first"> <div one="somevar"></div> </div>

Pay attention that the question concerns the controller as syntax, only the field in the controller, and not directly in the Osprey
this.somevar = 'Lorem'; , if you make this.somevar = 'Lorem'; in the controller this.somevar = 'Lorem';
then in the directive you will not get it as a simple scope.somevar = 'Lorem';

How to transfer data from a controller to a directive?

2 answers 2

More articles: