向控制器注入服务依赖时出错

Question

我创建了一个服务，我想向控制器注入依赖项，但它显示了一些错误，如

angular.js:12477 Error: [$injector:unpr] Unknown provider: ResultProvider <- Result <- ToolbarController http://errors.angularjs.org/1.4.7/$injector/unpr?p0=ResultProvider%20%3C-%20Result%20%3C-%20ToolbarController at http://localhost:3000/bower_components/angular/angular.js:68:12 at http://localhost:3000/bower_components/angular/angular.js:4289:19 at Object.getService [as get] (http://localhost:3000/bower_components/angular/angular.js:4437:39) at http://localhost:3000/bower_components/angular/angular.js:4294:45 at getService (http://localhost:3000/bower_components/angular/angular.js:4437:39) at invoke (http://localhost:3000/bower_components/angular/angular.js:4469:13) at Object.instantiate (http://localhost:3000/bower_components/angular/angular.js:4486:27) at http://localhost:3000/bower_components/angular/angular.js:9151:28 at http://localhost:3000/bower_components/angular-ui-router/release/angular-ui-router.js:4018:28 at invokeLinkFn (http://localhost:3000/bower_components/angular/angular.js:8789:9) <md-toolbar id="toolbar" class="md-menu-toolbar md-whiteframe-1dp md-background-bg ng-scope" ui-view="toolbar">

api.service.js

api.sharedResult = $resource(api.dataUrl + 'sharedResult/sharedResult.json', null, {
  get: {method: 'get'}
});

在模块中，我写了

toolbar.module.js

(function ()
{
'use strict';

angular
    .module('app.toolbar', [])
    .config(config);

/** @ngInject */
function config($stateProvider, $translatePartialLoaderProvider)
{
    $translatePartialLoaderProvider.addPart('app/toolbar');


    $stateProvider.state('app.toolbar', {
        url    : '/sharedwishlistdetails',
        views  : {
            'content@app': {
                templateUrl: 'app/toolbar/sharedwishlistdetails.html',
                controller : 'ToolbarController as vm'
            }
        },
        resolve: {
            Result: function (apiResolver)
            {
                return apiResolver.resolve('sharedResult@get');
            }
        }

    });   
}
})();

在控制器中我注入了如下

toolbar.controller.js

(function ()
{
'use strict';

angular
    .module('app.toolbar')
    .controller('ToolbarController', ToolbarController);


function ToolbarController(Result, $rootScope, $mdSidenav, msNavFoldService, $translate, $mdToast, $location, $localStorage, $http,  $scope)
{
    var vm = this;
    vm.sharedResult = Sharedresult.sharedResult;
}
})();

sharedwithlistdetails.html

<div id="sharedwishlistdetails" class="page-layout simple tabbed">
  <!-- HEADER -->
  <div class="header md-accent-bg" layout="row" layout-align="start center">
    <div class="title">
      <span class="md-display-1 font-weight-300">Shared Wishlist Details</span>
    </div>
  </div>
  <!-- / HEADER -->

  <md-content>
    <div class="head">
      <h2>Shared Wishlist Details</h2>
    </div>
    <hr/ style="width:1000px">
  </md-content>

  <md-content layout-padding>
    <div ng-repeat="data in vm.rslt">
      <h2>{{data.wName}}</h2>
    </div>
  </md-content>
</div>

Answer 1

错误信息中的这一行：

  

在invokeLinkFn（http://localhost:3000/bower_components/angular/angular.js:8789:9）

<md-toolbar id="toolbar" ... ui-view="toolbar">

表示ui-view已设置为指定状态。

您需要将其更改为：

<md-toolbar ... ui-view>