Question

我正在尝试从控制器（详细信息控制器）显示模态（注释视图）。我有每个视图绑定的独立控制器 “详细信息”视图具有单选按钮列表，在选择单选按钮时，需要显示包含某些数据的模式以及“确定”和“取消”按钮。此外，我需要取消选择在模式上单击取消按钮时在详细信息视图中选择的单选按钮我如何连接所有这些？我正在尝试下面的代码，并在从Details控制器调用note模式时出现内部服务器错误。
我从我的代码中复制了一些部分以显示我正在尝试的内容。

感谢您的任何建议。

详细信息视图：

<div class="list-group-item" ng-repeat="cpo in details.detailoptions">
    <div class="row">
        <h4><input type="radio" name="optRadio" ng-model="$parent.selectedOption" 
                   ng-value="{{o}}" ng-change="optionSelected()" 
                   ng-disabled="disableOptions" /></h4>
    </div>      
</div>

详情控制器：

appControllers.controller('detailsCtrl', ['$scope', '$uibModal',
    function ($scope, $uibModal) {

        $scope.selectedOption;

        $scope.optionSelected = function () {
            //call note modal
            $uibModal.open({
                templateUrl: 'notePanel',
                controller: 'noteCtrl',
                scope: $scope
            });
        }
    }
]);

注意观点：

<script type="text/ng-template" id="notePanel" ng-controller="noteCtrl">
    <div id="noteModal" class="modal fade">
        <div class="modal-dialog">
            <div class="form-group">
                <div class="row">
                    <div class="col-md-offset-2 col-md-8">
                        <h4>{{Note.Note1}}</h4>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="row">
                    <div class="col-md-offset-1 col-md-10">
                        {{Note.Note2}}
                    </div>
                </div>
            </div>

            <div class="panel-footer clearfix">
                <div class="row row-centered">
                    <div class="col-xs-3 col-thin col-centered">
                        <button type="submit" class="btn btn-primary btn-block" data-dismiss="modal" ng-click="OK()"><span class="glyphicon glyphicon-ok"></span> Agree</button>
                    </div>
                    <div class="col-xs-3 col-thin col-centered">
                        <button type="button" class="btn btn-default btn-block" ng-click="Cancel()"><span class="glyphicon glyphicon-remove"></span> Disagree</button>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>
</script>

注意控制器：

appControllers.controller('noteCtrl', ['$scope', 'dataService',
    function ($scope, service) {

        $scope.Note;

        $scope.OK = function () {
            //close modal
        }

        $scope.Cancel = function () {
           //deselect the option selected in Details view.
        }

        function init() {
            service.getNote($scope.optionSelected, function (data) {
                if (data) {
                    $scope.Note = data;
                }
                else {
                    console.log('Error getting note file');
                    //show error dialog
                }
            });
        }

        init();

    }
]);

如何从angularjs / ui-bootstrap中的控制器调用模态？

0 个答案: