Question

在我的angularJS应用程序中，我正在尝试将参数传递给模态弹出窗口，以便在单击Modal链接时，弹出窗口中会显示一个名称。模态链接来自一个自定义指令，该指令从外部服务获取名称列表。

我尝试跟随this tutorial to Create an Angularjs Popup Using Bootstrap UI以及documentation for $uibModal，因为该教程有点过时了。

我可以让模态PopUp和控制器工作，但是我无法将参数传递给它。

我在Plunker上复制了这个问题。

这个问题是我无法从titlename指令传递给popupController listings param（参见script.js in Plunker）。我认为我没有正确设置决心。通过在Chrome中设置调试器，我可以看到titlename到目前为止的值。

app.directive('listings', [function(){
    return {
        restrict: 'E',
        ...
        controller: ['$scope','$uibModal', function listingsDirectiveController($scope,$uibModal) {
            $scope.open = function (titlename) {
                var uibModalInstance = $uibModal.open({
                    templateUrl: 'popup.html',
                    controller: 'popupController',
                    titlename: titlename,
                    resolve: {
                        item: function(){
                            return titlename;
                        }
                    }
                });
            }
        }]
    };
}]);

但它没有传递给popupController。在下面的代码中，titlename的值为undefined

app.controller('popupController', ['$scope','$uibModalInstance', function ($scope,$uibModalInstance, titlename) {
    $scope.title1 = titlename;
    $scope.close = function () {
        $uibModalInstance.dismiss('cancel');
    };
}]);

知道为什么会发生这种情况以及如何解决这个问题？这是在AngularJS中使用resolve的正确方法吗？

Answer 1

首先，您要将item.name而不是文字字符串'{{item.name}}'传递到open方法，因此请将模板更改为

ng-click="open(item.name)"

其次，您已解析的属性名为item，但您似乎期待titlename，因此将其更改为

resolve: {
    titlename: function() {
        return titlename;
    }
}

最后，您的控制器中没有titlename注入注释，因此您需要添加注释

app.controller('popupController', ['$scope','$uibModalInstance', 'titlename',
function ($scope,$uibModalInstance, titlename) {
    // ...
}])

修复了Plunker~ http://plnkr.co/edit/ee7Psz2jXbVSkD0mfhS9?p=preview

Answer 2

使用ng-click时，您不需要双重支撑。有关使用双花括号的更多信息，请参阅this帖子。所以你的listing指令应该是这样的。您传递的是实际字符串'{{item.name}}'

<a href="#" ng-click="open(item.name)">{{item.name}} -Popup</a>

然后在popupController中，您没有传递已解决的item值。控制器应为：

app.controller('popupController', ['$scope','$uibModalInstance', 'item', function ($scope,$uibModalInstance, titlename) {

请参阅plunker

Answer 3

首先，在listingsDirective.html中，不要使用大括号来传入变量。此外，通过将titlename1添加到指令$scope并与子模态共享该父作用域，您可以访问模态中的变量。

app.directive('listings', [function(){
    return {
        restrict: 'E',
        scope: {
            data:'=',
        },
        templateUrl: 'listingsDirective.html',
        replace: true,
        controller: ['$scope','$uibModal', function listingsDirectiveController($scope,$uibModal) {
            $scope.open = function (titlename) {
              $scope.titlename = titlename;
                var uibModalInstance = $uibModal.open({
                    templateUrl: 'popup.html',
                    controller: 'popupController',
                    scope: $scope,
          resolve: {
            item: function(){
              return $scope.titlename;
            }
          }
                });
            }
        }]
    };
}]);

app.controller('popupController', ['$scope','$uibModalInstance', function ($scope,$uibModalInstance) {
    $scope.title1 = $scope.titlename;
    $scope.close = function () {
        $uibModalInstance.dismiss('cancel');
    };
}]);

New Plunkr：http://plnkr.co/edit/RrzhGCLuBYniGGWvRYI9?p=preview

无法使用AngularJS将参数传递给我的ui Modal

3 个答案: