AngularJS文档准备就绪，无法正常工作

AngularJS document ready not functioning

本文关键字：常工作 工作 文档 准备就绪 AngularJS      更新时间：2023-10-12

我正试图在用AngularJS打印的按钮上添加一个jQuery侦听器，该侦听器无法工作，因为该元素在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

试试这个：

$(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);
}
相关文章：