无法使用 AngularJS 将参数传递到我的 ui 模态

Question

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

我尝试按照 this tutorial to Create an Angularjs Popup Using Bootstrap UI along with the documentation for $uibModal 进行操作，因为该教程有点过时了。

我可以让模态弹出窗口和控制器正常工作，但我无法将参数传递给它。

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

这个问题是我无法从 listings 指令中获取传递给 popupController 的 titlename 参数（参见 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 post。所以你的 listings 指令应该是这样的。您传递的是实际字符串 '{{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');
    };
}]);

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

无法使用 AngularJS 将参数传递到我的 ui 模态

Can't pass a parameter to my ui Modal with AngularJS

angularjs

angular-ui-bootstrap

angular-ui-modal