AngularJS документ готов не работает

Question

Я пытаюсь добавить прослушиватель JQuery на кнопку, которая печаталась с AngularJS, слушатель не работает, поскольку элемент не доступен на DOM:

var app = angular.module('myapp', []); 

socket.on('datasources/update:done', function() { 
    socket.emit('datasources/list'); 
}); 

socket.emit('datasources/list'); 
app.factory('socket', function ($rootScope) { 
    return { 
    on: function (eventName, callback) { 
     socket.on(eventName, function() { 
     var args = arguments; 
     $rootScope.$apply(function() { 
      callback.apply(socket, args); 
     }); 
     }); 
    }, 
    emit: function (eventName, data, callback) { 
     socket.emit(eventName, data, function() { 
     var args = arguments; 
     $rootScope.$apply(function() { 
      if (callback) { 
      callback.apply(socket, args); 
      } 
     }); 
     }) 
    } 
    }; 
}); 

function dslist($scope, socket) { 
    socket.on('datasources/list:done', function (datasources) { 
    $scope.datasources = datasources.datasources; 
    }); 
} 

angular.element(document).ready(function() { 
    $('.delete-data-source').on('click', function(event) { 
    console.log('a'); 
    }) 
}); 

HTML тег (нефрит):

html(lang='en', ng-app="myapp" xmlns:ng="http://angularjs.org") 

Соответствующий орган HTML (нефрит):

.box-content(ng-controller="dslist") 
       table.table.table-bordered.table-striped 
        thead 
        tr(role="row") 
         th: strong Name 
         th: strong Type 
         th: strong Tables 
         th: strong Records 
         th: strong Status 
         th: strong Action 
        tbody 

        tr(ng-repeat="ds in datasources", ng-cloak) 
         td {{ds.name}} 
         td {{ds.type}} 
         td {{ds.numTables || 0 }} 
         td {{ds.numRecords || 0 }} 
         td {{ds.status || 'UNKNOWN' }} 
         td: button.delete-data-source(data-id="{{ds.name}}") Delete 

Answer 1

Попробуйте это:

$(document).on('click', '.delete-data-source', function(event) { 
    console.log('a'); 
}); 

Но я думаю, что у вас неправильный подход. Вы должны иметь что-то вроде этого:

<div ng-repeat="datasource in datasources"> 
    <input type="button" ng-click="remove(datasource)" value="remove"/> 
</div> 

В контроллере:

$scope.remove = function(datasource){ 
    $scope.datasources.splice($scope.datasources.indexOf(datasource), 1); 
}