Question

我正在使用ng-clip创建一个简单的AngularJS应用。这是我的代码：

<!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

当我点击＆＃34;复制！＆＃34;按钮，我无法复制final p元素中的所有文字。

如何将final p元素中的整个文本复制到剪贴板中？

Answer 1

根据doc ng-model肯定无法正常使用ng-model不能应用于("<p>")段标记。

ngModel指令绑定输入，select，textarea（或自定义表单）使用NgModelController对范围内的属性进行控制由该指令创建和公开。

如何使用ng-clip将HTML元素中的文本复制到剪贴板中？

1 个答案: