1

I'm creating a simple AngularJS app using ng-clip. This is my code:

<!doctype html>
<html>
<head>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
  <script src="src/ZeroClipboard.min.js"></script>
  <script src="src/ngClip.js"></script>
</head>
<body>

<div ng-app="myapp">
  <div class="container" ng-controller="myctrl">

    <div class="page-header">
      <h3>Simple Script</h3>
    </div>

    <form>
      <div class="form-group">
        <label>Name</label>
        <input type="text" class="form-control" placeholder="" ng-model="name">
      </div>
      <div class="form-group">
        <label>Gender</label>
        <input type="radio" ng-model="gender" value="Male"> Male <input type="radio" ng-model="gender" value="Female"> Female
      </div>
      <div class="form-group">
        <label>DOB</label>
        <input type="text" class="form-control" placeholder="" ng-model="dob">
      </div>
      <p><strong>Preview</strong></p>
      <p ng-model="final">Name: {{name}}<br/>
        Gender: {{gender}}<br/>
        DOB: {{dob}}</p>
      <button class="btn btn-default" clip-copy="final">Copy!</button>

      <br><br>

      <textarea class="form-control" rows="3" placeholder="Test here"></textarea>
    </form>
  </div>
</div>

<script>
  var myapp = angular.module('myapp', ["ngClipboard"]);

  myapp.config(['ngClipProvider', function(ngClipProvider) {
    ngClipProvider.setPath("src/ZeroClipboard.swf");
  }]);

  myapp.controller('myctrl', function ($scope) {
    $scope.fallback = function(copy) {
      window.prompt('Press cmd+c to copy the text below.', copy);
    };

    $scope.showMessage = function() {
      console.log("clip-click works!");
    };
  });
</script>

</body  >
</html>

Plunker Preview

Plunker Code

When I click on the "Copy!" button, I couldn't copy all text inside the final p element.

How to copy entire text inside the final p element into my clipboard?

Zulhilmi Zainudin
  • 9,017
  • 12
  • 62
  • 98

1 Answers1

0

It will definately not work as per doc ng-model cannot applied to paragraph("<p>") tag.

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.

squiroid
  • 13,809
  • 6
  • 47
  • 67