Angularjs如何在指令

Question

我收到以下错误在我meanjs应用解决未知的提供程序错误 -

Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- uiJqDirective 
http://errors.angularjs.org/1.4.7/$injector/unpr?p0=%24scopeProvider%20%3C-%20%24scope%20%3C-%20uiJqDirective 
    at REGEX_STRING_REGEXP (angular.js:68) 
    at angular.js:4289 
    at Object.getService [as get] (angular.js:4437) 
    at angular.js:4294 
    at getService (angular.js:4437) 
    at Object.invoke (angular.js:4469) 
    at angular.js:7080 
    at forEach (angular.js:336) 
    at Object.<anonymous> (angular.js:7078) 
    at Object.invoke (angular.js:4478) 

我有如下的UI-JQ指令 -

'use strict'; 

/** 
* 0.1.1 
* General-purpose jQuery wrapper. Simply pass the plugin name as the expression. 
* 
* It is possible to specify a default set of parameters for each jQuery plugin. 
* Under the jq key, namespace each plugin by that which will be passed to ui-jq. 
* Unfortunately, at this time you can only pre-define the first parameter. 
* @example { jq : { datepicker : { showOn:'click' } } } 
* 
* @param ui-jq {string} The $elm.[pluginName]() to call. 
* @param [ui-options] {mixed} Expression to be evaluated and passed as options to the function 
*  Multiple parameters can be separated by commas 
* @param [ui-refresh] {expression} Watch expression and refire plugin on changes 
* 
* @example <input ui-jq="datepicker" ui-options="{showOn:'click'},secondParameter,thirdParameter" ui-refresh="iChange"> 
*/ 
angular.module('ui.jq', ['ui.load']). 
    value('uiJqConfig', {}). 
    directive('uiJq', ['$scope', 'uiJqConfig', 'JQ_CONFIG', 'uiLoad', '$timeout', function uiJqInjectingFunction($scope, uiJqConfig, JQ_CONFIG, uiLoad, $timeout) { 

    return { 
    restrict: 'A', 
    compile: function uiJqCompilingFunction(tElm, tAttrs) { 

     if (!angular.isFunction(tElm[tAttrs.uiJq]) && !JQ_CONFIG[tAttrs.uiJq]) { 
     throw new Error('ui-jq: The "' + tAttrs.uiJq + '" function does not exist'); 
     } 
     var options = uiJqConfig && uiJqConfig[tAttrs.uiJq]; 

     return function uiJqLinkingFunction($scope, elm, attrs) { 

     function getOptions(){ 
      var linkOptions = []; 

      // If ui-options are passed, merge (or override) them onto global defaults and pass to the jQuery method 
      if (attrs.uiOptions) { 
      linkOptions = $scope.$eval('[' + attrs.uiOptions + ']'); 
      if (angular.isObject(options) && angular.isObject(linkOptions[0])) { 
       linkOptions[0] = angular.extend({}, options, linkOptions[0]); 
      } 
      } else if (options) { 
      linkOptions = [options]; 
      } 
      return linkOptions; 
     } 

     // If change compatibility is enabled, the form input's "change" event will trigger an "input" event 
     if (attrs.ngModel && elm.is('select,input,textarea')) { 
      elm.bind('change', function() { 
      elm.trigger('input'); 
      }); 
     } 

     // Call jQuery method and pass relevant options 
     function callPlugin() { 
      $timeout(function() { 
      elm[attrs.uiJq].apply(elm, getOptions()); 
      }, 0, false); 
     } 

     function refresh(){ 
      // If ui-refresh is used, re-fire the the method upon every change 
      if (attrs.uiRefresh) { 
      $scope.$watch(attrs.uiRefresh, function() { 
       callPlugin(); 
      }); 
      } 
     } 

     if (JQ_CONFIG[attrs.uiJq]) { 
      uiLoad.load(JQ_CONFIG[attrs.uiJq]).then(function() { 
      callPlugin(); 
      refresh(); 
      }).catch(function() { 

      }); 
     } else { 
      callPlugin(); 
      refresh(); 
     } 
     }; 
    } 
    }; 
}]); 

我试图用指令加载$ scope，但我认为我做错了。 任何人都可以建议我做错了什么，或者我应该在哪里找到正确的问题

Answer 1

不要注入$ scope。取而代之的是，通过更换链接，其中有范围的第一个参数编译：

link: uiJqLinkingFunction(scope, tElm, tAttrs) { 

Answer 2

你不必注入范围在你的指令，只需删除$scope在数组中。

directive('uiJq', [ 
    '$scope', // YOU HAVE TO REMOVE THIS! 
    'uiJqConfig', 
    'JQ_CONFIG', 
    'uiLoad', 
    '$timeout', 
    function uiJqInjectingFunction(
    $scope, // REMOVE THIS AS WELL 
    uiJqConfig, 
    JQ_CONFIG, 
    uiLoad, 
    $timeout) { 

    /* ... */ 

    }]) 

你已经有逻辑函数里面的指令，通过你的编译函数返回的范围

return function uiJqLinkingFunction($scope, elm, attrs) { 
    /* ... */ 
}; 

所以，你应该仅拥有这些注射：

directive('uiJq', [ 
    'uiJqConfig', 
    'JQ_CONFIG', 
    'uiLoad', 
    '$timeout', 
    function (
    uiJqConfig, 
    JQ_CONFIG, 
    uiLoad, 
    $timeout) { 

    /* ... */ 

    }])