Question

Noob警告！

这里的问题正是我所拥有的问题：angularjs - Accessing ui-bootstrap modal dismiss and close function from another controller

但是，我不明白所选择的答案是正确的！我理解这些词语，但不了解如何共享控制器。

我有一个打开模态的app控制器，在模态模板中，我有一个指令。我希望能够在指令控制器中操作模态实例。

这是我的标记：

        <script type="text/ng-template" id="settingsModal">
            <div class="modal-header">
                <h3 class="modal-title">Confirm update!</h3>
            </div>
            <div class="modal-body">
                <calendar-settings cid="calendarId"/>
            </div>
            <div class="modal-footer">
                <!-- I want these buttons inside the directive instead -->
                <button class="btn btn-primary" ng-click="ok()">OK</button>
                <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
            </div>
        </script>

在模态的主体中，我调用calendarSettings指令，并且我希望能够在我的指令中使用模式实例的.dismiss和.close方法。

这是open方法的样子：

            var modalInstance = $modal.open({
                templateUrl: 'settingsModal',
                controller: 'ModalInstanceController',
                resolve: {
                    item: function() {
                        return $scope.sEntry;
                    },
                    cid: function() {
                        return id;
                    }
                },
                reject: {
                    item: function() {
                        return $scope.sEntry;
                    },
                    cid: function() { return null; }
                }
            });

这里是ModalInstanceController：

    calendarsApp.controller('ModalInstanceController', function($scope, $modalInstance, item, cid){
        $scope.item = item;
        $scope.calendarId = cid;
        console.log(item);

        $scope.ok = function () {
          $modalInstance.close($scope.item);
        };

        $scope.cancel = function () {
          $modalInstance.dismiss('cancel');
        };
    });

我认为我想要做的很容易，但我不确定如何将模态实例控制器暴露给指令，或者我应该考虑采用不同的方法。

注意：我没有在此处粘贴指令中的代码。但是我试图从我的指令控制器中访问关闭和解除模态实例的方法。

感谢您的帮助！

Answer 1

So 

    var modalInstance = $modal.open({
                    templateUrl: 'settingsModal',
                    controller: 'ModalInstanceController',
                    resolve: {
                        item: function() {
                            return $scope.sEntry;
                        },
                        cid: function() {
                            return id;
                        }
                    },
                    reject: {
                        item: function() {
                            return $scope.sEntry;
                        },
                        cid: function() { return null; }
                    }

                 //This comes from ModalInstanceController result is                 
                  //equivalent to whatever u send back 
                }).result.then(function(result){
        console.log(result); //Press f12 on chrome and go to console.
    });



 calendarsApp.controller('ModalInstanceController', function($scope, $modalInstance, item, cid){
        $scope.item = item;
        $scope.calendarId = cid;
        console.log(item);

        $scope.ok = function () {
            //You are sending back $scope.item but if you want everything 

//send back the $scope which is equivalent to  sending back //ModalInstanceController
         // $modalInstance.close($scope.item);
          $modalInstance.close($scope);
        };

        $scope.cancel = function () {
          $modalInstance.dismiss('cancel');
        };
    });

ui-bootstrap：从指令控制器中访问模态实例

1 个答案: