AngularJS - passing variable to scope (from directive to use it in controller) not working

Question

I would ask for some help and explanation on the given issue. It seems like I can not pass variable to scope from directive to use it in controller, variable is called caret_position. Please see below code.

Controller

var myApp = angular.module('myApp', []);

myApp.controller('Composer', function Composer($scope, $http) {

    // getting snippets json data
    $http.get('data/snippets/default.json').success(function(data) {
        $scope.snippets = data;
        $scope.snippets.count = data.length;
    });

    // adding snippet to composed text
    $scope.composed_text = '';
    $scope.snippet_insert = function() {
        var snippet = this.item.content;

        console.log($scope.caret_position); // stackoverflow.com note: this is not working
    };
});

Directive:

myApp.directive('caretPosition', function() {
    return {
        link: function(scope, element, attrs) {
            element.bind('keyup click', function(e){
                var caret_position = element[0].selectionStart;
                scope.caret_position = caret_position; // stackoverflow.com note: this is not working
                scope.$apply(); // stackoverflow.com note: not working as well
                console.log('my current position: ' + caret_position);
            });
        }
    }
});

This is my html structure: <textarea class="form-control composed_text" ng-model="composed_text" caret-position="" rows="20"></textarea> — be-codified
– be-codified, Commented Jan 29, 2015 at 16:26
This is actually impossible to work out without a Codepen or JSFiddle. @Rahul Ravindran's answer seems pretty correct but without a Fiddle it's kind of gotta be a wild-ass guess — Code Whisperer
– Code Whisperer, Commented Jan 29, 2015 at 16:27
Instead of using = i gave it some thought and used the parent execution function way instead.Lemme know if theres a scope of improvement here jsfiddle.net/jwd3gywz/26 — Rahul Ravindran
– Rahul Ravindran, Commented Jan 29, 2015 at 17:45
Here is my Plunker snippet - plnkr.co/edit/KS7hxlK0te5LwMilZIPA?p=preview — be-codified
– be-codified, Commented Jan 29, 2015 at 18:22

Fedaykin · Accepted Answer · 2015-01-29 18:46:22Z

3

The recommended way to share data between directives and controllers is by using a Service, you can create one by using the factory method:

var app = angular.module('plunker', []);

app.factory('SharedService', function() {
  return {
    sharedObject: {
      value: '',
      value2: ''
    }
  };
});

And then you may inject your SharedService on both your directive and controller.

Here is a more detailed example about sharing data between controllers and directives:

http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=preview

Hope that helps

Update: I just edited your example to use that concept and it is working, take a look: http://plnkr.co/edit/2pUODHCd9qTRcQTiziC2?p=preview

edited Jan 29, 2015 at 18:46

answered Jan 29, 2015 at 17:31

Fedaykin

4,5723 gold badges25 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

be-codified Over a year ago

thank you, I will look into it. Seems the most clean way to me.

Fedaykin Over a year ago

Please take a look at the plunkr I just made and let me know if it is ok.

Rahul Ravindran · Accepted Answer · 2015-01-29 16:23:41Z

0

You would need to use a 2 way binding variable on your directive with isolate scope. That is the way a directive is able to update a scope property of an enclosing controller.you can do this by specifying scope:{catetproperty:'='} on your directive definition object

answered Jan 29, 2015 at 16:23

Rahul Ravindran

3183 silver badges11 bronze badges

Comments

user2266928 · Accepted Answer · 2015-08-27 09:04:53Z

0

make the service in
var myApp = angular.module('mean.mapping2');
myApp.factory('SharedService', function() {
    return {
        caretInfo: {
            position: 0
        }
    };
});

inject service in controller
angular.module('mean.mapping2').controller('mapProperties', ['$scope', 'Global', 'Mapping2', '$http', '$stateParams','SharedService',

console.log( $scope.caret = SharedService.caretInfo);//controller part for calling services

in directive use as 
 .directive('repeatEvents', function ($timeout,SharedService) {

 .directive('setupConnections', function ($location,SharedService) {//i have two directive


use this in directive
 var caret_position = items;
                            SharedService.position = caret_position;
                            console.log('Caret current position: ' + SharedService.position);

answered Aug 27, 2015 at 9:04

user2266928

4755 silver badges3 bronze badges

2 Comments

user2266928 Over a year ago

in coontroller user service as like

user2266928 Over a year ago

var test = JSON.stringify(SharedService.position);

Collectives™ on Stack Overflow

AngularJS - passing variable to scope (from directive to use it in controller) not working

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related