Select2（一致する結果は一致しません）AngularJS

私はselect2（ui-selecet）を持っており、結果がないか、すべてのオプションが選択されている（複数選択）メッセージが表示され、モーダル。Select2（一致する結果は一致しません）AngularJS

ボタンをクリックすると、モーダルが開きません。この機能は実行されません。

Selectセレクトコンポーネント：

formatNoMatches: function() { 
return "Nenhum resultado encontrado. <button type='button' class='btn btn-default' ng-click='modalOpen()'>" + "Cadastrar" + "</button>"; 
}

Selectセレクトビュー：

<select ui-select2="select2Options" multiple="multiple" ng-model="select" style="width: 100%" data-placeholder="Selecione uma pessoa">` 
<option value=""></option> 
<option ng-repeat="person in people" value="{{person}}">{{person.name}}</option> 
</select>

OBS：私はそれがスコープの問題であるべきだと思うが、私はそれを解決する方法がわかりません。

誰にでもアイデアや解決策はありますか？

出典

2017-05-17 Luan Menezes

さて、私はこのようにそれを解決するために管理：

コンポーネントでSelect2.jsをそれはボタンを表示し、OpenModal（この）関数を呼び出すので、私は変更を行いました。
は、私は、変数として引数ライン3440
次の私は、この変数（_myOptions）を使用して、データ・ターゲットの取得を同じ引数を取得します_myOptions変数を置きます。私は結果が終了したり、それを持っていないときSelect2.jsこれにより

にアクセスされたモーダルターゲットを渡す$ scope.select2Optionsを作成したコントローラで

メッセージが表示され、ボタンをクリックするとモーダルが開きます。

ViewHTML：

<select ui-select2="select2Options" data-target="#animal" id="select2Callback" multiple="multiple" ng-model="person" > 
          <option value=""></option> 
          <option ng-repeat="person in people" value="{{person}}">{{person.name}}</option> 
         </select>

Select2.jsコンポーネント：

formatNoMatches: function() { 
     var target = _myOptions[0].target; 
     return "Nenhum resultado encontrado. <button type='button' class='btn btn-default' data-toggle='modal' "+ 
       "data-target='"+target+"' onClick='openModal(this)'> Cadastrar </button>"; 
    }

コントローラー：

$scope.select2Options = { 
      allowClear: true, 
      multiple: true, 
      target: '#teste' 
     };

ModalDirective：それは動作しませんでした

angular.module('modalDirectives', []) 
    .directive('modal', function() { 
     var ddo = {}; 
     ddo.restrict = "E"; 
     ddo.transclude = true; 
     ddo.scope = { 
      modalid: '@', 
      title: '@' 
     }; 
     ddo.templateUrl = "/app/js/directives/modal.html"; 
     return ddo; 
    })

出典

2017-05-19 17:41:59

が効果的にアタッチ/登録されるように、ボタンを動的に生成してコンパイルするには、$compileを使用する必要があります。この例では、コンテナ要素を使用して、コンパイル後に簡単に追加できるようにボタンを保持しています。必要ではありません。<body>または他のDOM要素に追加できます。

これを機能させるには、$documentと$compileを注入する必要があります。

HTML：

<!-- some container to append generated button to --> 
<div id="foo"></div>

JS：助け

formatNoMatches: function() { 
    // some container element to hold the dynamically generated button 
    var $container = angular.element($document[0].getElementById('foo')); 

    // button markup as angular element wrapped in jqLite 
    var button = angular.element('<button type="button" class="btn btn-default" ng-click="modalOpen()">Cadastrar</button>'); 

    // compile using angular's $compile service 
    button = $compile(button)($scope); 

    // append the button into the container 
    $container.empty().append(button); 
}

うまくいけば！

出典

2017-05-17 19:33:07

、彼らは二つの異なるスコープ（RootScopeおよび範囲）にあるように、私はDOMでそれを操作し、モーダルを開くコマンドを注入しようとするでしょうに見えます。ご協力いただきありがとうございます。 –

Select2（一致する結果は一致しません）AngularJS

答えて

関連する問題