Angular [$injector:unpr] 带有自定义指令的未知提供者

Question

我在 UI-Bootstrap 模态指令的模板字段中使用自定义指令时遇到了一个小问题。

我的目标是通过 resolve 属性将数据发送到模态，并在我自己的指令的控制器中重新使用这些已解析的参数。

var app = angular.module('app', ['ui.bootstrap']);

app.controller('MyCtrl', ['$scope', '$modal', function($scope, $modal) {
  $scope.openModal = function () {
    var popup = $modal.open({
            template: '<my-modal></my-modal>',
            resolve : {
                mydata : function() {
                    return 42;
                }
            }
        });
  };
}]);

app.controller('ModalController', ['$scope', 'mydata', function($scope, mydata) {
  //The error is in this directive controller
  $scope.mydata = mydata;
}]);

app.directive('myModal', function() {
  return {
    restrict: 'E',
    templateUrl : 'mymodal.html',
    controller : 'ModalController',
    replace: true
  };
});

可能是我走错了路

有什么建议可以让这段代码正常运行吗？

http://plnkr.co/edit/RND2Jju79aOFlfQGnGN8?p=preview

Answer 1

您需要提供一个对象 "mydata"。确保您有一个正确实施的工厂来提供您的 myData 对象。如果你这样做了，你可以 "inject" 你想要的任何地方的 myData 对象。

yourApp.MyDataFactory = function () {
   var myData = {i: "am", an: "object"};
   return myData;
}

这将提供一个 "myData" 对象

Answer 2

解析参数只注入到$modal.open配置参数中定义的控制器，但你想将它注入指令控制器。这是行不通的。想象一下，您将在其他地方使用 myModal 指令，不会有可以使用的 myData 对象。

但我真的不明白，你需要指令做什么。这样你会更轻松：

app.controller('MyCtrl', ['$scope', '$modal',
  function($scope, $modal) {
    $scope.openModal = function() {
      var popup = $modal.open({
        templateUrl: 'mymodal.html',
        controller: 'ModalController',
        resolve: {
          mydata: function() {
            return 42;
          }
        }
      });
    };
  }
]);

// Here the mydata of your resolves will be injected!
app.controller('ModalController', ['$scope', 'mydata',
  function($scope, mydata) {
    $scope.mydata = mydata
  }
]);

笨蛋：http://plnkr.co/edit/bIhiwRjkUFb4oUy9Wn8w?p=preview

Answer 3

我不确定你想用指令完成什么，但如果你想提供一种通用的方式来调用 $model，然后你可以在你的应用程序的许多地方使用，你可以最好用服务包装 $model。然后您可以从应用中的其他地方调用。

我 fork 并修改了你的 plunkr 以这样工作：http://plnkr.co/edit/0CShbYNNWNC9SiuLDVw3?p=preview

app.controller('MyCtrl', ['$scope', 'modalSvc', function($scope, modalSvc) {
  var mydata = {
    value1: 42
  };

  $scope.openModal = function () {
    modalSvc.open(mydata);
  };
}]);

app.factory('modalSvc', ['$modal', function ($modal) {

  var open = function (mydata) {
      var modalInstance,
          modalConfig = {
              controller: 'ModalController',
              resolve: {
                  mydata: function () {
                      return mydata;
                  }
              },
              templateUrl: 'mymodal.html'
          };

      modalInstance = $modal.open(modalConfig);

      return modalInstance;
  };

  return {
      open: open
  };

}]);

此外，我将 mydata 更改为一个对象，而不是“42”，因为我相信您还会有其他数据要传入。标记已及时更新：

<div class="modal-body">
  BODY {{mydata.value1}}
</div>

这样做，解析属性有效，您可以获取数据。

至于提到您必须定义 mydata 的其他答案，传入 $model 的解析属性会为您完成此操作，因此它可以注入模态的控制器（ModalController), 就像你所做的那样。

Angular [$injector:unpr] 带有自定义指令的未知提供者

Angular [$injector:unpr] Unknown provider with customize directive

angularjs

angularjs-directive

angular-ui-bootstrap