无法使用 AngularJS 将参数传递给我的 ui 模态答案

【问题标题】：Can't pass a parameter to my ui Modal with AngularJS无法使用 AngularJS 将参数传递给我的 ui 模态
【发布时间】：2017-01-16 23:17:15
【问题描述】：

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

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

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

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

这个问题是我无法将titlename 参数从listings 指令传递给popupController（参见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 的正确方法吗？

【问题讨论】：

标签： angularjs angular-ui-bootstrap angular-ui-modal

【解决方案1】：

使用ng-click 时不需要双括号。有关使用双花括号的更多信息，请参阅this 帖子。所以你的列表指令应该是这样的。您传递的是实际字符串 '{{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

【讨论】：

谢谢，原来如此。我之前尝试过传递项目值和其他一些方法，但是使用 '{{item.name}}' 它一直无法正常工作，谢谢 mil
我尝试使用相同的方法将弹出窗口添加到 index.html，而不是使用 <a ng-click="pgCtrl.open(pgCtrl.obj[1].name)">in page popup</a> 从指令中添加，并使用 pgCtrl 中的逻辑，但它不起作用。知道为什么吗？
@Holy，你有小笨蛋吗？

【解决方案2】：

首先，您想将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

【讨论】：

【解决方案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

【讨论】：