Question

我正在研究Angular，我正在我的页面中创建一个模态表单。在我的页面中，我有2个控制器，第一个来自显示列表，第二个来自我的模态控制器。

我的问题是我无法从模态中获取价值。

这是我的一些代码：

<div ng-app="sampleApp">
    <div class="row">
        <div class="col-sm-12" ng-controller="MainCtrl">
        ... table here
        </div>
        <script type="text/ng-template" id="myModalContent">
        <div ng-form="noteForm" ng-controller="NoteCtrl">
            <div class="modal-header">
                <h3 class="modal-title">Add New Note</h3>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="form-group col-md-12" ng-class="{'has-error': noteForm.c_subject.$invalid && noteForm.c_subject.$touched, 'has-success': !noteForm.c_subject.$invalid }">
                    <label class="control-label">Subject</label>
                    <input type="text" name="c_subject" class="form-control" required ng-model="note.c_subject" ng-minlength="10" />
                    <span style="color: red" ng-show="noteForm.c_subject.$dirty && noteForm.c_subject.$invalid">
                        <span ng-show="noteForm.c_subject.$error.required">Subject is required!</span>
                        <span ng-show="noteForm.c_subject.$error.minlength">Subject is should be less than 11 characters!</span>
                    </span>
        </div>
    </div>

</div>
...
<div class="modal-footer">
                <button class="btn btn-primary btn-sm" ng-disabled="noteForm.$invalid" ng-click="sendForm()">OK</button>
                <button class="btn btn-warning btn-sm" ng-click="cancel()">Cancel</button>
            </div>

这是我的js：

<script type="text/javascript" src="<?php echo base_url('assets/common_js/sample_app.js'); ?>"></script>
<script type="text/javascript">

    sampleApp.controller('MainCtrl', function($scope, $modal, $log) {

        $scope.animationsEnabled = true;

        $scope.open = function open(size) {

            var modalInstance = $modal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'myModalContent',
                size: size,
                controller: 'ModalInstanceCtrl',
            });

        }

    });

    sampleApp.controller('ModalInstanceCtrl', function($scope, $modalInstance){

        /*
        $scope.ok = function () {
            alert('you clicked!');
        };
        */

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

    });

    sampleApp.controller('NoteCtrl', function($scope) {

        //$scope.master = {c_subject: 'Lorem Ipsum Subject', c_message: 'Lorem Ipsum Message', c_sender: 'anonymous_phil'}
        //$scope.note = angular.copy($scope.master)

        $scope.sendForm = function ($scope) {
            console.log($scope) //undefined value
        }

        $scope.word_count = function () {
            //return 100 - $scope.c_message.length; // produce error because $scope.c_message can't access
        }

    });


</script>

我正在使用此事件来获取数据，但我得到的是未定义的值：

<button class="btn btn-primary btn-sm" ng-disabled="noteForm.$invalid" ng-click="sendForm()">OK</button>

和

$scope.sendForm = function ($scope) {
                console.log($scope) //undefined value
            }

我希望你能帮助我。

以下是这方面的内容：http://plnkr.co/edit/o7K1Db9oBzpfiMoYg3qm

Answer 1

试试这个

 var modalInstance = $modal.open({
                animation: $scope.animationsEnabled,
                templateUrl: 'myModalContent',
                size: size,
                controller: 'ModalInstanceCtrl',
                resolve: {
                  items: function () {
                   return $scope.note;
               } }
            });
    modalInstance.result.then(function (entity) {
      // do whatever you want to do with the returned entity
    }, function (e) {
       // error 
       console.log(e);
    });
  };

Answer 2

对于此功能，您不应传递参数$scope：

$scope.sendForm = function ($scope) {
    alert($scope)
}

因为Angular不会为你注入$scope！（请参阅https://docs.angularjs.org/guide/di）：

DI在整个Angular中都很普遍。您可以在定义时使用它组件或为模块提供 run和config块。

在函数sendForm中，$scope引用您提供的参数，即undefined。

更改为：

$scope.sendForm = function () {
    alert($scope)
}

然后它有效：http://plnkr.co/edit/wS073GWq7CGq1gaFpXEn?p=preview

Answer 3

我从Anik的回答中得到Plunkr并更改了。

http://plnkr.co/edit/UI9jq3QE6U7YECKPmdYc?p=preview

例如，如果您需要调用$ http请求，其承诺是在模式的sendForm()控制器的NoteCtrl方法内，您可以调用{{1} }，将在另一个控制器的$modalInstance.$close($scope.note)上进行评估。

如何从Angular中的模态获取文本输入值？

3 个答案: