7

James Smith の tokenInput Jquery プラグインから angular.js ディレクティブを作成しようとしています: http://loopj.com/jquery-tokeninput

これが私がこれまでに持っているものです：

antdna = angular.module('Communication', []);

antdna.factory('autoCompleteService', [function() {
    return {
      getSource: function() {
      return [{"id":1, "name":"John Doe"}, {"id":2, "name":"Jane Smith"}];
    }
  }
}]);

antdna.directive('autoComplete', function(autoCompleteService) {
    return {
        restrict: 'A',
        link: function(scope, elem) {
            elem.tokenInput(autoCompleteService.getSource(), {
                crossDomain:false,
                theme: "facebook",
                hintText: "Enter User Name",

                preventDuplicates: true
            });
            }
    };
});

次のマークアップを使用します。

<input type="text" name="recipient" ng-model="conversation.recipients" class="messageComposeTextField" auto-complete placeholder="To :" required />

TokenInput は完全に機能しますが、私の問題は、モデルにバインドできないことです。

{{conversation.recipients}}

は空白です。

tokenInput プラグインは、リスト要素 (ul および li) を使用して独自のマークアップを生成します。したがって、要素を検査すると、次のようになります。

<ul class="token-input-list-facebook">
  <li class="token-input-token-facebook"><p>John Doe</p><span class="token-input-delete-token-facebook">×</span></li><li class="token-input-input-token-facebook"><input type="text" autocomplete="off" autocapitalize="off" id="token-input-" style="outline: none; width: 30px;"><tester style="position: absolute; top: -9999px; left: -9999px; width: auto; font-size: 12px; font-family: Ubuntu, 'Ubuntu Beta', UbuntuBeta, Ubuntu, 'Bitstream Vera Sans', 'DejaVu Sans', Tahoma, sans-serif; font-weight: 400; letter-spacing: 0px; white-space: nowrap;"></tester>    </li>
</ul>

<input type="text" name="recipient" ng-model="conversation.recipients" class="messageComposeTextField ng-pristine ng-invalid ng-invalid-required" auto-complete="" placeholder="To :" required="" style="display: none;">

生成された tokenInput マークアップはディレクティブの一部ではないことに注意してください。ここでの本当の問題は、angularjs ディレクティブ内で独自のマークアップを生成する jquery プラグインをカプセル化する方法です。

4

4 に答える 4

0

何らかの理由で loopj トークン入力を使用する必要がある人にとって、この要点は私にとって完璧に機能しました。私はAngularの経験があまりなく、彼のコメントは2つしかなかったので、それは一種の謎めいたものであることがわかりました.

次のような最上位の jquery モジュールを含めます。

angular.module('myModule', ['jquery'])

あなたが持っているhtmlで：

<input token-input="source">

あなたが持っているJavaScriptでは：

$scope.source = {/* data */};
$scope.tokenInput = {/* options */}

異なるオプションをいくつか用意したい場合は、次のようなこともできるようです。

<input id="id" token-input="source">
$scope.source = {/* data */};
$scope.tokenInput_id = {/* options */}
于 2015-04-21T16:48:30.993 に答える