Question

我对Angular很新，我正在尝试使用AngularJS模式。单击按钮时显示正常，但模态内的取消按钮不起作用。

myApp.controller("ServiceController", function($scope, $http, $modal) {
    var modalInstance;
    $scope.select = function(id) {
        this.modalInstance = $modal.open({
            animation: $scope.animationsEnabled,
            templateUrl: 'myModalContent.html',
            controller: 'ServiceController',
        });

        console.log(this.modalInstance);
    };

    $scope.cancel = function() {
        console.log(this.modalInstance); <--- this is null
        this.modalInstance.dismiss('cancel');
    };
});

在取消函数中发生错误，因为modalInstance变量为空。

任何人都可以解释为什么这是null，即使select方法明确指定了一个模态实例。

这就是HTML代码的样子：

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">update this line</h3>
    </div>
    <div class="modal-body">
        <input class="form-control" ng-model="client.name"/>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary">Update</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

由于

Answer 1

角度boostrap网站上推荐的方法是为Modal使用单独的控制器。这有助于模块化您的代码，并将不同的功能分开。试试这个：

myApp.controller("ServiceController", function($scope, $http, $modal) {
    $scope.select = function(id) {
        var modalInstance = $modal.open({
            animation: $scope.animationsEnabled,
            templateUrl: 'myModalContent.html',
            controller: 'modalController',
        });

        console.log(modalInstance);
    };
});

myApp.controller('modalController', function ($scope, $modalInstance, items) {

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

无法从另一个函数访问一个函数中的模态

1 个答案: