使用ngClipboard的角度控制器 - 錯誤：未知的提供商

我試圖在控制器內部設置一個ng-click事件，這樣當用戶點擊一個div時，函數就會運行並編譯一個字符串並將其添加到剪貼板。使用ngClipboard的角度控制器 - 錯誤：未知的提供商

我雖然發現了以下錯誤：

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）

EDIT（解決）

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（NEW！ - 一次角文件）

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

所以把新添加[「ngclipboard」]到主文件，不允許該應用正常工作的控制器。之前，該應用程序會加載，沒有錯誤，但整個頁面將是空白的。特別感謝Shannon的幫助。

來源

2016-08-15 Kenny

你怎麼了'ngClipboard'的lib添加到您的應用程序？ –

確保正確像這樣包括源成體的底部

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

來源

2016-08-15 22:51:18

我試過，其實，我的網頁加載完全空白。任何想法爲什麼？ – Kenny

你有沒有javascript錯誤？ –

控制檯中沒有顯示任何內容：/ – Kenny

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

來源

2016-08-15 23:26:55 JakesCreative

您是否需要在Angular應用程序嗎？或者簡單地將'ngClipboard.js'添加到你的html中，然後添加指令？ – Kenny

就像他們在答案的評論中提出的一樣，你通過script/src添加模塊，然後通過調用'angular.module（'mon itorApp'，[' ngRoute」， 'ngclipbo ARD']）;' – JakesCreative

使用ngClipboard的角度控制器 - 錯誤：未知的提供商

回答

相關問題