AngularJS - 传递变量范围（从指令使用它在控制器）不工作 [英] AngularJS - passing variable to scope (from directive to use it in controller) not working

问题描述

我要问一些帮助和解释，在给定的问题。好像我不能从指令传递变量范围控制器中使用它，变量称为 caret_position 。请参考下面code。

控制器

  VAR对myApp = angular.module（'对myApp'，[]）;myApp.controller（'作曲家，作曲功能（$范围，$ HTTP）{    //获取片段JSON数据
    $ http.get（数据/片段/ default.json'）。成功（功能（数据）{
        $ scope.snippets =数据;
        $ scope.snippets.count = data.length;
    }）;    //添加代码段文字组成
    $ scope.composed_text ='';
    $ scope.snippet_insert =功能（）{
        VAR片段= this.item.content;        的console.log（$ scope.caret_position）; // stackoverflow.com注：这是行不通的
    };
}）;
 

指令：

  myApp.directive（'caretPosition'，函数（）{
    返回{
        链接：功能（范围，元素，ATTRS）{
            element.bind（'KEYUP点击'功能（E）{
                变种caret_position =元素[0] .selectionStart;
                scope.caret_position = caret_position; // stackoverflow.com注：这是行不通的
                。范围$适用（）; // stackoverflow.com注：不工作，以及
                的console.log（我的当前位置：'+ caret_position）;
            }）;
        }
    }
}）;
 

解决方案

推荐的方式来分享指令和控制器之间的数据是通过使用服务，您可以通过使用工厂创建一个方法：

  VAR应用= angular.module（'plunker'，[]）;app.factory（'SharedService'，函数（）{
  返回{
    共享对象：{
      值：''，
      数值2：''
    }
  };
}）;
 

然后你可以注入你的 SharedService 你的指令和控制器两者。

下面是关于控制器和指令之间共享数据的更详细的例子：

http://plnkr.co/edit/Q1VdKJP2tpvqqJL1LF6m?p=$p$ PVIEW

希望帮助

更新：
我刚才编辑您的示例使用该概念，它是工作，一起来看看：
http://plnkr.co/edit/2pUODHCd9qTRcQTiziC2?p=$p$pview

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

解决方案

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

这篇关于AngularJS - 传递变量范围（从指令使用它在控制器）不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！