使用 ngClipboard 的角度控制器 - 错误：未知的提供者

Question

我正在尝试在控制器内设置ng-click 事件，以便当用户单击 div 时，函数会运行并编译字符串并将其添加到剪贴板。

我收到以下错误：

angular.js:13550Error: [$injector:unpr] Unknown provider: ngClipboardProvider <- ngClipboard <- eventCtrl

HTML

<div class="row">
    <div><div ng-click="vm.copy()" class="button tiny">Copy</div></div>
</div>

角度控制器（更新）

(function() {

    angular
        .module('monitorApp', ['ngClipboard'])
        .controller('eventCtrl', eventCtrl);

    eventCtrl.$inject = ['$scope', '$routeParams', 'monitorData', 'ngClipboard'];
    function eventCtrl($scope, $routeParams, monitorData, ngClipboard) {
        var vm = this;

        vm.copy = function() {
            vm.copyjunk = "COPIED crap here!!";
            vm.copyjunk = ngClipboard.toClipboard;
        };
    }

})();

我在控制器中还有一些其他代码用于处理我创建的服务，但为了简单起见，我将其排除在外，并且只有 ngClipboard 的基本要素。

我还尝试了许多将ngClipboard 注入控制器的不同变体，但它似乎不起作用。感谢您的帮助！

（注意：我的 html 中包含了 clipboard.min.js 和 ngclipboard.min.js）

编辑（已解决）

HTML

<div ngclipboard data-clipboard-text="COPIED TEXT HERE!" class="button tiny">Copy Dial-in</div>

控制器

Left it alone, no "ngclipboard" stuff here

app.js（新！- 主要角度文件）

angular.module('monitorApp', ['ngRoute','ngclipboard']);

因此，将新添加的 ['ngclipboard'] 放入主文件而不是控制器可以让应用程序正常工作。以前，应用程序会加载，没有错误，但整个页面都是空白的。特别感谢香农的帮助。

Answer 1

确保您在正文底部正确地包含源代码

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://cdn.rawgit.com/zenorocha/clipboard.js/master/dist/clipboard.min.js"></script>
<script src="dist/ngclipboard.min.js"></script>

看起来您只是错过了模块依赖项。

angular.module('monitorApp'), ['ngclipboard']);

不仅如此，您还尝试使用源中不存在的名为 ngClipboard 的提供程序。

这个 ngclipboard 模块只使用属性指令。 HTML：

<!-- Target -->
<input id="foo" value="https://github.com/sachinchoolur/ngclipboard.git">

<!-- Trigger -->
<button class="btn" ngclipboard data-clipboard-target="#foo">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>

这将在按下按钮时从输入中复制内容（以 id 为目标）。

在您的情况下，如果您的 vm.copy() 方法只返回一个字符串，请执行以下操作：

<button class="btn" ngclipboard data-clipboard-text="{{vm.copy()}}">
    {{vm.copy()}}
</button>

Answer 2

ngClipboard 模块只是一个指令。将它带入我的控制器也会破坏我的应用程序。您只需要将标记直接添加到您的视图中：

---

<button class="btn" ngclipboard data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
    Copy to clipboard
</button>

---

<button class="btn" ngclipboard data-clipboard-text="{{vm.copyjunk}}">
    {{vm.copyjunk}}
</button>