Angularjs 角度[$injector:unpr]具有自定义指令的未知提供程序

在UI引导模式指令的模板字段中使用customize指令有一个小问题

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
  };
});

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

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
  };
});

var-app=angular.module（'app'，['ui.bootstrap']）；
app.controller（'MyCtrl'，['$scope'，'$modal'，函数（$scope，$modal）{
$scope.openModal=函数（）{
var popup=$modal.open({
模板：“”，
决心：{
mydata:function（）{
返回42；
}
}
});
};
}]);
app.controller（'ModalController'，['$scope'，'mydata'，function（$scope，mydata）{
//此指令控制器中存在错误
$scope.mydata=mydata；
}]);
应用程序指令（'myModal'，函数（）{
返回{
限制：'E'，
templateUrl:'mymodal.html'，
控制器：“ModalController”，
替换：正确
};
});

也许我走错了路

有没有建议让这个代码正常工作

---

您需要提供一个对象“mydata”。确保您有一个提供myData对象的正确实现的工厂。如果您已经这样做了，您可以随时“注入”myData对象

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

---

这将提供一个“myData”对象，解析参数仅注入在

$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
  }
]);

---

Plunker:

我不确定您试图用该指令实现什么，但是如果您试图提供一种通用的方法来调用$model，然后您可以在应用程序的许多地方使用它，那么最好用服务包装$model。然后，您可以在应用程序中的其他位置拨打电话

我对您的plunkr进行了分叉和修改，以实现以下目的：

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

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

正文{{mydata.value1}

通过这种方式，resolve属性起作用，您可以获取数据

---

至于提到您必须定义

mydata

的其他答案，传递到$model中的resolve属性会为您执行此操作，因此可以像您所做的那样将其注入模态的控制器（

ModalController

）。

resolve in$model为您执行此操作，因此可以将其注入模态的控制器。您不需要为工厂/服务提供服务。这肯定是使用$modal的“正确”方法。由于您使用的是指令，我认为您可能希望制作一个可重用组件，在整个应用程序中使用，而不必每次都提供控制器/模板。如果是这样的话，看看我的答案：