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

时间:2016-08-15 22:50:06

标签: javascript angularjs

我试图在控制器内部设置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.jsngclipboard.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']);

因此,将新增的[&#39; ngclipboard&#39;]添加到主文件中而不是控制器允许应用程序正常工作。之前,应用程序将加载,没有错误,但整个页面将是空白。特别感谢Shannon的帮助。

1 个答案:

答案 0 :(得分:3)

确保将源正确包含在正文的底部

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