personalizadas - AngularJS: pasar variable al ámbito(de la directiva para usarlo en el controlador) no funciona

directivas personalizadas angular 5

Question

Pediría ayuda y explicación sobre el problema. Parece que no puedo pasar la variable al alcance de la directiva para usarla en el controlador, la variable se llama caret_position . Por favor vea el código a continuación.

Controlador

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
    };
});

Directiva:

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);
            });
        }
    }
});

Answer 1

Debería usar una variable de enlace bidireccional en su directiva con alcance aislado. Esa es la forma en que una directiva puede actualizar una propiedad del alcance de un controlador envolvente. Para ello, especifique el alcance: {catetproperty: ''=''} en su objeto de definición de directiva

Answer 2

La forma recomendada de compartir datos entre directivas y controladores es mediante el uso de un Servicio, puede crear uno utilizando el método de factory :

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

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

Y luego puede inyectar su SharedService tanto en su directiva como en su controlador.

Aquí hay un ejemplo más detallado sobre el intercambio de datos entre controladores y directivas:

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

Espero que ayude

Actualización: Acabo de editar su ejemplo para usar ese concepto y está funcionando, eche un vistazo: http://plnkr.co/edit/2pUODHCd9qTRcQTiziC2?p=preview

Answer 3

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);