ajaxクエリからロードされたデータをng-clickするWatch

Question

私は、検索プロンプトを開き、クエリを実行し、検索結果を表示し、ユーザがアイテムを選択できるようにするAngularJSサービスを持っています。

私が抱えている問題は、検索結果を表示するときに、ng-clickが機能しないことです。検索結果リストで、ユーザーはng-clickでその項目を選択するhtmlアンカーの値をクリックできます。ユーザーが必要な項目をクリックすると、ng-click機能を呼び出すことができません。 ng-clickでアンカーをクリックすると何も起こりません。

次のコードは、検索結果のモーダルを表示した後に 'rendered'されたangularjs-ui-bootstrapイベントです。私はjson検索結果を取得し、jqueryデータテーブルに表示しています。 'createdRow'では、ng-clickのウォッチャーを追加しようとしていますが、動作していません。

ng-click機能を使用して検索結果から電話をかけるにはどうすればよいですか？

// after the modal window is rendered, set the data and datatable 
_instance.rendered.then(function() { 
    console.log('searchService.showResults.rendered.then;'); 
    $('#searchresultsmodaltable').dataTable({ 
    info: false, 
    searching: false, 
    ordering: false, 
    lengthChange: false, 
    autowidth: true, 
    pageLength: 6, 
    pagingType: "simple_numbers", 
    language: { 
     emptyTable: "No results found." 
    }, 
    data: _results, 
    columns: [{ 
     data: "codeHtml", 
     title: "Code" 
    }, { 
     data: "name", 
     title: "Name" 
    }], 
    createdRow: function(row, data, dataIndex) { 
     console.log('searchService.showResults.createdRow;'); 
     $compile(angular.element(row).contents())($scope); 
    } 
    }); 
}); 

Plunker： https://plnkr.co/edit/BAtlRpVR2MBPfXr7wmJq?p=preview

plunkerコードで問題を再現するには、次の

1. クリックして検索入力モーダルを開くには '検索' ボタンを。
2. 「検索」ボタンをクリックすると、検索結果のモーダルが表示されます。
3. 検索結果に「code2」が表示されます。 'code2'をクリックすると、何も起こりません。 htmlアンカーはng-click = "onClickSelect（ 'code2'）"で設定されますが、そのイベントはクリックされても起動しません。 plunkerコードの70行目を見ると、検索結果を取得してデータテーブルに格納しています。 93行目では、ng-clickウォッチャーを追加しようとしていますが、これは動作しません。

ありがとうございます。

Answer 1

私はあなたの問題を解決しました。 コードを見て、コントローラーは2回使用されます（2つのuibModal）。すべてのコントローラは新しいスコープを持つので、showResult funcに渡すスコープは古いスコープです。

コードを修正するには、コントローラを分離し、showResultを2番目のものに移動します。