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函数而不是将它放在单独的控制器中呢？

Answer 1

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

在你的情况下，它看起来像这样：

'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函数并在内部控制器定义中添加变量来传递变量。我用它来以单向方式传递值，但从不用于双向绑定。我认为你也应该能够通过外部范围。

我不知道它是否有效，所以请注意！ :)

'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。 Haven没有测试上面的代码，只是从你提供的代码中把它放在一起

有关详细信息，请参阅我的回答：

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

调用Controller中的模态函数 - AngularJS

1 个答案: