1

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

我已经尝试按照本教程使用 Bootstrap UI 创建 Angularjs 弹出窗口以及$uibModal的文档，因为该教程有点过时了。

我可以让模态 PopUp 和控制器工作，但我不能向它传递参数。

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

这个问题是我无法将titlename参数传递给popupControllerfromlistings指令（请参阅Plunker 中的 script.js）。我认为我的决心设置不正确。在 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');
    };
}]);

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

4

3 回答 3

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

于 2017-01-16T23:38:30.017 回答
2

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

于 2017-01-16T23:39:16.103 回答
0

首先，在你的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

于 2017-01-16T23:43:29.407 回答