web-dev-qa-db-ja.com

angle-ui-bootstrapモーダルが結果を返さない

Angular-ui-bootstrapのモーダルサービスで問題が発生しています。次の例に従ってモーダルを設定しました： http://angular-ui.github.io/bootstrap/ しかし、リストアイテムを削除すると、モーダルから結果を取得できません。モーダルコンテンツから、テキスト領域と別のngモデルに置き換えます。 jsfiddleをセットアップしますが、必要なものを表示するために必要な特定のライブラリ（angular-ui-bootstrapなど）を含める方法がわかりません。モーダルのスクリーンショットがあります： http://d.pr/i/wT7G 。

以下は、メインコントローラー、メインビュー、モーダルコントローラー、モーダルビューのコードです。

メインビューコード

<button type="button" class="btn btn-success" ng-click="importSchedule()">import schedule (JSON)</button>

メインコントローラー

$scope.importSchedule = function() {

    var modalInstance = $modal.open({
        templateUrl: 'views/importmodal.html',
        controller: 'ModalInstanceCtrl'
    });

    modalInstance.result.then(function (result) {
        console.log('result: ' + result);
        // $scope.schedule = angular.fromJson(scheduleJSON);
    }, function () {
        console.info('Modal dismissed at: ' + new Date());
    });
};

モーダルビュー

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h4 class="modal-title">Import schedule(JSON)</h4>
</div>

<div class="modal-body">
  <textarea class="form-control" rows="15" ng-model="schedule"></textarea>
  <pre>form = {{schedule | json}}</pre>
</div>

<div class="modal-footer">
  <button class="btn btn-primary" ng-click="ok()">OK</button>
  <button class="btn btn-default" ng-click="cancel()">Cancel</button>
</div>

モーダルコントローラー

'use strict';

angular.module('VMP')
    .controller('ModalInstanceCtrl', function ($scope, $modalInstance) {

        $scope.schedule = '';

        $scope.ok = function () {
            console.log('schedule: ', $scope.schedule);
            $modalInstance.close($scope.schedule);
        };

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

    });
angularjstwitter-bootstrapmodal-dialogangular-ui-bootstrap
8
Michael Trouw

_$scope.ok_内のconsole.log()は何を示していますか？実際に正しい値が表示される場合は、スコープ関連の問題を回避するために、スケジュールデータをオブジェクト内にラップすることをお勧めします。

_$scope.schedule = { data: '' };
_

次に、モーダルビュー内：

_<textarea class="form-control" rows="15" ng-model="schedule.data"></textarea>
_

そしてあなたの出力：

_$modalInstance.close($scope.schedule.data);
_
13
Matt Way