javascript - 从 Angular Directive(指令)返回数据

Question

我正在用 angular 编写我的第一个指令 - 它本质上只是用 jquery 编写的 freebase 搜索小部件的包装器。

我想让指令应用程序独立(唯一的依赖项是外部 css 和 jquery)。

Here is a plunkr指令的现状。

指令本身:

directive('suggest', function() {
  return {
      restrict: 'E',
      template: "<input type='text'>",
      replace:true,
      link: function(scope, element, attrs) {
        var language = 'en'; //set english as default language
        if (attrs.lang){
          language = attrs.lang;
          attrs.$observe('lang', function(value) {
            console.log("lang val " + value);
            language = value;
          });
        }
        $(element).suggest({
          "lang": language
        })
        .bind("fb-select", function(e, data) { 
          console.log(data);
        });
      }
  };
});

当用户从下拉菜单中选择一个项目时，将运行以下函数:

.bind("fb-select", function(e, data) { 
          console.log(data);
        });

将数据从选择提供给使用它的应用程序的最佳做法是什么？

Answer 1

最 Angular 方法是在隔离范围内使用数据绑定(bind)(2 种方式)来实现此目的:

 restrict: 'E',
      template: "<input type='text'>",
      replace:true,
      scope:{
         myModel:'='
      },
      link: function(scope, element, attrs) {
      ............

在那个选择函数里面:

.bind("fb-select", function(e, data) { 
          console.log(data);
          scope.myModel=data;
});

用法:

<suggest my-model="someModel" .... />

在你的 Controller $scope 中:

$scope.someModel="";

虽然您仍然需要在指令中处理该预选模型的初始绑定(bind)，但是，是的，最干净的方法是通过隔离范围进行 2 路数据绑定(bind)。

编辑

这两篇文章非常适合帮助将 jquery 插件移植到 angular:

http://rogerz.github.io/blog/2013/09/27/jQuery-to-angularjs/

http://henriquat.re/directives/advanced-directives-combining-angular-with-existing-components-and-jquery/angularAndJquery.html