Question

我正在尝试在使用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正文（jade）：

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

AngularJS文档准备不起作用

1 个答案: