1

angular-ui の ui-select2 を使用しています。選択範囲にカスタム html フォーマットを追加したいと考えています。Select2 は、その構成で formatSelection を指定することでこれを可能にします。

選択範囲の書式設定に使用したい、以下のような角度タグを含む html があります。

var format_code = $compile('<div ng-click="showHide=!showHide" class="help-inline"><div style="cursor: pointer;" ng-show="!!showHide" ng-model="workflow.select" class="label">ANY</div><div style="cursor: pointer;" ng-hide="!!showHide" ng-model="workflow.select" class="label">ALL</div></div>')( $scope );


 var format_html = "<span>"  + data.n + ' : ' + data.v +' ng-bind-html-unsafe=format_code'+ "</span>"

$scope.select_config = {
    formatSelection: format_html
}

上記のように html をコンパイルして割り当てると、[object,object] がブラウザーに表示されます。コンパイルしないと、html が適切にレンダリングされていることがわかりますが、Angular バインディングは発生しません。つまり、クリックは機能しません。

何が間違っているのですか？

4

1 に答える 1

2

私は同じ問題を抱えていました.select2がjqueryダイアログにロードされ、私が与えるオプションオブジェクトを使用していませんでした。

私がやったことは、次のようにディレクティブで要素を分離することです:

  define(['./module'], function (module) {
    return module.directive('dialogDirective', [function () {
      return {
        restrict: 'A',
        controller: function ($scope) {
          console.log('controller gets executed first');
          $scope.select2Options = {
            allowClear: true,
            formatResult: function () { return 'blah' },
            formatSelection: function () { return 'my selection' },
          };
        },
        link: function (scope, element, attrs) {
          console.log('link');
          scope.someStuff = Session.someStuff();

          element.bind('dialogopen', function (event) {
            scope.select2content = MyResource.query();
          });
        },
      }
    }]);

そしてマークアップ

   <div dialog-directive>
          {{select2Options}}
          <select ui-select2="select2Options" style="width: 350px;">
            <option></option>
            <option ng-repeat="item in select2content">{{item.name}}</option>
          </select>
          {{select2content | json}}
        </div>

ここで重要なこと:

「コントローラー」関数は、html がレンダリングされる前に実行されます。つまり、select2 ディレクティブが実行されると、すでに select2Options オブジェクトが初期化されています。

「link」関数は、MyResource $resource を使用して select2content 変数を非同期的に設定します。

続けて試してみると、ドロップダウン内のすべての要素が「何とか」として表示され、選択した要素が「私の選択」として表示されるはずです。

これが役立つことを願っています。これがSOへの私の最初の投稿でした。

于 2014-02-20T21:33:01.193 に答える