0

通常の選択ボックスをChosenJS（http://harvesthq.github.com/chosen/）選択ボックスに変えるカスタムディレクティブ属性を作成しました。コードをよりクリーンにするために、外部のchosen.jsプラグインファイルをHeadJSと非同期でロードしたいと思います。これが私の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がそれを認識し、それに応じてビューを更新できるようにする方法はありますか？

4

1 に答える 1

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

});
于 2012-09-02T00:41:18.393 に答える