9

よろしくお願いします。このタグマネージャーを Web アプリケーションで使用しています。jQuery関数はこれまで正常に動作します

<input type="text" name="tags" placeholder="Tags" class="tagsManager" />

下に置かれています

ng-repeat = "(key,val) in client_proj"

ここにコードの短いスニペットがあります

<div class="accordion-group" ng-repeat="(key,val) in client_proj"><!--For Every Project in Project List-->
  <div class="accordion-heading" style="background-color:#EFF8FB">
    <a class="accordion-toggle" data-toggle="collapse" data-parent="#mainAccordion" href="#{{val.id}}" ng-click="disableEditor()">
      <div align="center">{{val.title}}</div>
    </a>
  </div>
  <div id="{{val.id}}" class="accordion-body collapse">
    <div class="accordion-inner" style="font-size:12px; background-color:white">
      <strong>Technologies Exposure:</strong><br/>
      <div ng-hide="editorEnabled">{{val.exposure}}</div>
      <div ng-show="editorEnabled">
        <textarea ng-show="editorEnabled" class="span12" ng-model="val.exposure" rows="12" style="resize:vertical"></textarea>
        <input type="text" name="tags" placeholder="Tags" class="tagsManager" />

押した後に新しいタグを作成するなどの機能を実行せずに、通常の入力として表示されます。

誰が何が起こっているのか教えてもらえますか?

4

1 に答える 1

10

1.jQuery プラグインのラッパーとして機能するカスタム ディレクティブを作成します。

angular.module('<YOUR APP OR MODULE>').directive('tagsManager', function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.tagsManager();
            //whatever other logic would go here
        }
    };
});

次に、スクリプトからtabsManager の自動初期化 ($('<SELECTOR>').tagsManager();またはのようなもの) を削除します。jQuery('<SELECTOR>').tagsManager();

最終的に、ng-repeat でディレクティブを入力要素に追加します (オプションで他の属性を追加します。必要な場合は、ディレクティブ内でこれらの属性の動作をプログラムする必要がある場合があります)。

<input tags-manager>

これにより、AngularJS は、入力が DOM でレンダリングされた後、(カスタム ディレクティブを介して) 入力の tabsManager を初期化します。

理にかなっていますか？

于 2013-03-03T14:51:47.083 に答える