javascript - 在 Controller 中调用模态函数 - AngularJS

Question

我有一个正在使用 ui.bootstrap 的项目，根据我遵循的教程，我必须将其设置为与此类似:

'use strict';

angular.module('academiaUnitateApp')
  .controller('EntryCtrl', function ($scope, $modal) {
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: 'ModalCtrl'
        })
    };
  });

'use strict';

angular.module('academiaUnitateApp')
  .controller('ModalCtrl', function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close();
    };

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

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

<script type="text/ng-template" id="modal.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <p class="alert alert-danger">
                WARNING: By deleting the article all it's nested articles will be moved to the article holding this one.
                <br/>
                Do you still want to delete this article?
            </p>
            <button class="btn btn-primary" ng-click="delete()">Yes</button>
            <button class="btn btn-primary" ng-click="cancel()">No</button>
            <span ng-show="error.state" class="alert alert-danger">{{ error.message }}</span>
            <span ng-show="done.state" class="alert alert-success">{{done.message}}</span>
        </div>
        <div class="modal-footer">
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
</script>

这可以找到所有内容，但是如果我想将 $scope.delete 函数移动到 EntryCtrl Controller 中而不是放在单独的 Controller 中怎么办？

Answer 1

您可以传入匿名 Controller 。这将允许您将所有逻辑放在一个文件中。

在您的情况下，它看起来像这样:

'use strict';

angular.module('academiaUnitateApp')
  .controller('EntryCtrl', function ($scope, $modal) {
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: [
                '$scope', '$modalInstance', function($scope, $modalInstance) {
                   $scope.ok = function () {
                        $modalInstance.close();
                    };

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

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

编辑

您可以通过定义resolve函数并在内部 Controller 定义中添加变量来传递变量。我使用它以单向方式传递值，但从未用于双向绑定(bind)。我认为你也应该能够通过外部范围。

不知道是否有效，请注意! :)

'use strict';

angular.module('academiaUnitateApp')
  .controller('EntryCtrl', function ($scope, $modal) {
    $scope.myValue = 'foobar';
    $scope.open = function () {
        var modalInstance = $modal.open({
            templateUrl: 'modal.html',
            controller: [
                '$scope', '$modalInstance', 'outerScope', function($scope, $modalInstance, outerScope) {
                   $scope.ok = function () {
                        $modalInstance.close();
                    };

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

                    $scope.delete = function () {
                        $modalInstance.dismiss('cancel');
                    };
                }
            ],
            resolve: {
                outerScope: function() {
                    return $scope;
                }
            }
        })
    };
  });

PS。尚未测试上面的代码，只需将其与您提供的代码放在一起

有关更多详细信息，请参阅我的回答:

https://stackoverflow.com/a/29461685/3070052