Question

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

我想使指令应用程序独立（唯一的依赖项是外部css和jquery）。

现在指令的

指令本身：

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

最有角度的方法是在隔离范围内使用数据绑定（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" .... />

并在您的控制器$ scope中：

$scope.someModel="";

您仍然需要在指令中处理该预先选择的模型的初始绑定，但是，最简单的方法是通过隔离范围进行双向数据绑定。

修改

这两篇文章非常适合帮助将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

从angular指令返回数据

1 个答案: