ng-click이 동적으로 생성된 HTML에서 작동하지 않음

ng-click이 동적으로 생성된 HTML에서 작동하지 않음

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>

쿼리

$('#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>'
);

각도 스크립트

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

여기서 Angular의 컨트롤러 부분에서 호출되는 함수JS가 ng-click 이벤트에서 트리거되지 않습니다.Html은 정상적으로 추가되지만 ng-click은 작동하지 않습니다.효과적인 솔루션을 알려 주십시오.

아직 완벽한 해결책은 아니야!!!- 동적 컴파일을 수행하는 방법을 보여 주기 위해

app.controller('AppController', function ($scope, $compile) {

    var $el = $('<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>').appendTo('#newTransaction');
    $compile($el)($scope);

    $scope.create = function(){
        console.log('clicked')
    }
})

데모: 바이올린

돔 조작에 컨트롤러를 사용하지 마십시오.지시자의 도움을 받아야 합니다.

만들기 위해서ng-click이 소스를 컴파일하려면$compile서비스.Angular는 새로 생성된 HTML에 대해 알고 있어야 하므로 트리거하려면 이 HTML을 다이제스트 사이클에 포함해야 합니다.ng-click기타 이벤트도 있습니다.

참조

컴파일레이터 작성:

.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 );
        }
      });
    }
  };
});

after, 더미 생성factory추가 기능을 시뮬레이트합니다.

.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을 컴파일할 수 있습니다.

사용할 수 있습니다.angular.element(this).scope()ng클릭을 사용하지 않고

및 변경

'<button id="createHost" class="btn btn-mini btn-success" data-ng-click="create()"><b>Create</b></button>'

로.

'<button id="createHost" class="btn btn-mini btn-success" onclick="angular.element(this).scope().create()"><b>Create</b></button>'좋다

새 창에서 Cordova가 동적 링크를 열도록 해야 했기 때문에 해결책은 부모 요소를 ng클릭하고 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');
    }
})

컨트롤러 스코프에 ng-click과 같은 각도 지시어를 바인드하는 $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());

언급URL : https://stackoverflow.com/questions/19267979/ng-click-not-working-from-dynamically-generated-html