How to access $ionicModal object elements by id in

问题:

I have posted the same question in different way here SiganaturePad.Now I dont have idea to handle this case. I am using $ionicModal to populate the SignaturePad with canvas as below.

  /*SignaturePad*/
    $ionicModal.fromTemplateUrl('templates/signature.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
    alert('sign 1');

    var canvas=angular.element("#signature-pad");
    siganturePad = new SignaturePad(canvas);
    alert('sign');
    signaturePad.minWidth = 5;
    signaturePad.maxWidth = 10;
    signaturePad.penColor = "rgb(66, 133, 244)";    
  });
  $scope.openModal = function() {
    $scope.modal.show();    
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
  $timeout($scope.openModal, 200);

But am getting error like "Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite! See: http://docs.angularjs.org/api/angular.element"

I can predict the issue.that I am accessing elements via id in wrong way.So could you Please suggest How to Access the SiganaturePad to Initialize and access its subElements (clear and Save button) in $ionicModal.

回答1:

Unfortunately the built-in jQuery lite is very limiting. Luckily, looking up an element by ID is pretty easy:

So instead of:

 var canvas=angular.element("#signature-pad");

just do:

 var canvas=angular.element(document.getElementById("signature-pad"));