49

HTML

<table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false" >
    <tr id="newTransaction">
    </tr>
    <tr data-ng-repeat="host in hosts|filter:search:strict" >
       <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostCd}}</td>
       <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostName}}</td>
    </tr>
</table>

Jクエリ

$('#newTransaction').append(
 '<td contenteditable><input type="text" class="editBox" value=""/></td>'+ 
 '<td contenteditable><input type="text" class="editBox" value=""/></td>'+
 '<td>'+
    '<span>'+
        '<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'+
    '</span>'+
 '</td>'
);

Angular スクリプト

$scope.create = function() {
       alert("Hi");
    };

ここで、AngularJS のコントローラー部分で呼び出される関数は、ng-click イベントからトリガーを取得していません。Html は正常に追加されていますが、ng-click が機能していません。それを機能させるための解決策を教えてください

4

5 に答える 5

36

動作させるには、サービスを使用してこのソースをコンパイルするng-click必要があります。Angular は新しく生成された HTML を認識する必要があるため、この HTML をダイジェスト サイクルに含めて、その他のイベントをトリガーする必要があります。$compileng-click

見るFiddle

「コンパイラ」を作成します。

.directive( 'compileData', function ( $compile ) {
  return {
    scope: true,
    link: function ( scope, element, attrs ) {

      var elmnt;

      attrs.$observe( 'template', function ( myTemplate ) {
        if ( angular.isDefined( myTemplate ) ) {
          // compile the provided template against the current scope
          elmnt = $compile( myTemplate )( scope );

            element.html(""); // dummy "clear"

          element.append( elmnt );
        }
      });
    }
  };
});

その後、 appendfactoryをシミュレートするダミーを作成します。

.factory( 'tempService', function () {
  return function () { 
    return '<td contenteditable><input type="text" class="editBox" value=""/></td>'+ 
            '<td contenteditable><input type="text" class="editBox" value=""/></td>'+
             '<td>'+
                '<span>'+
         '<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'+
              '</span>'+
            '</td>';
  };
});

そして最後に次のように呼び出します。

<div compile-data template="{{mainPage}}"></div>

コントローラーで：

$scope.newTransaction= tempService();

あなたの例では、次のようになります。

<table data-ng-table="tableParams" class="table table-bordered table-hover " style="border-collapse:collapse" data-ng-init="host.editSave = false" >
    <tr compile-data template="{{newTransaction}}">
    </tr>
    <tr data-ng-repeat="host in hosts|filter:search:strict" >
       <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostCd}}</td>
       <td class="hostTableCols" data-ng-hide="host.editSave">{{host.hostName}}</td>
    </tr>
</table>

ところで、今のところ、コードに同じディレクティブを使用して、動的 HTML をコンパイルできます。

于 2013-10-09T09:33:28.223 に答える
3

Cordova に動的リンクを新しいウィンドウで開かせる必要があったため、私の解決策は、親要素に ng-click を配置し、event.target を見て、クリックされたものを確認することでした。

<p ng-bind-html="foo.barhtml" ng-click="generalClick($event)"></p>

それから

.controller('FooCtrl', function ($scope) {
    var html = '<a href="http://www.google.com">google.com</a>';

    $scope.foo.barhtml = html.replace(/href/g, 'data-href');

    $scope.generalClick = function(event){
        // have Cordova open the link in a browser window
        window.open(event.target.attributes['data-href'].value, '_system');
    }
})
于 2014-08-09T03:20:15.360 に答える
2

ここに $compile サービスを追加する必要があります。これにより、ng-click などの角度ディレクティブがコントローラー スコープにバインドされます。次のようなものです。

var divTemplate = '..your div template';
var temp = $compile(divTemplate)($scope);

次に、それを HTML に追加します。

angular.element(document.getElementById('foo')).append(temp);

次のように、イベントを div にバインドすることもできます。

var div = angular.element("divID");
div.bind('click', $scope.addPhoto());
于 2016-11-23T08:00:44.837 に答える