javascript-framework - 使用 AngularJS 和 HeadJS 异步实例化模块指令

Question

我创建了一个自定义指令属性，它将一个普通的选择框变成一个 ChosenJS (http://harvesthq.github.com/chosen/) 选择框。为了使代码更干净，我想用 HeadJS 异步加载外部 selected.js 插件文件。这是我的 AngularJS 指令：

myApp.module.directive('chosen-select', function() {
  head.js(myApp.pathTo.plugin.chosen);

  head.ready(function() {
    var linker = function(scope, element, attr) {
        element.chosen();
    }

    return {
        restrict: 'A',
        link: linker
    }
  })
});

我遇到的问题是，似乎因为我异步加载它，Angular 不知道它存在并且指令不起作用。有没有办法以编程方式注入动态加载的模块指令，以便 Angular 知道它并相应地更新视图？

Answer 1

在您的示例中，指令函数没有返回指令的配置对象，这就是它失败的原因。

试试这个：

var myApp = angular.module('myApp', []);
myApp.directive('chosenSelect', function() {
  var el;

  // load chosen file
  head.js(myApp.pathTo.plugin.chosen);
  head.ready(function() {
    jQuery(el).chosen();
  });

  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      // set el via closure, so that head ready callback has access to it
      el = element;
    }
  };

});