web-dev-qa-db-ja.com

bootstrap modalにデータを渡すAngularJS

私は何かを逃していると思うが、何を理解できない。
基本的に次のようにモーダルにオブジェクトを渡そうとしていますが、渡されたオブジェクトを取得する代わりにnullを取得します...だから私はスコープに問題があると思いますが、Angularといくつかの助けが必要です。

コントローラ

app.controller("musicViewModel", function ($scope, $http, $location, $uibModal, $log) {

$scope.selected = null;

$scope.open = function (item) {

    $scope.selected = item;

    $log.info('Open' + $scope.selected); // get right passes object

    var modalInstance = $uibModal.open({
        templateUrl: 'myModalContent.html',
        controller: 'musicViewModel',
        size: 'lg',
        resolve: {
            items: function () {
                return $scope.selected;
            }
        }
    });
};

$scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
};
});

見る

<div class="row" ng-controller="musicViewModel">
    <script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3 class="modal-title">I'm a modal!</h3>
        </div>
        <div class="modal-body">
            <ul>
                <li>
                    {{ selected }} // always gets null
                </li>
            </ul>
        </div>
    </script>
</div>
angularjstwitter-bootstrapangular-uibootstrap-modalangularjs-controller
33
Stefano Vuerich

同じscopeを再度渡すのではなく、自分のコントローラーのcontrollerを渡すことをお勧めします。そうすることで、resolveも削除できます。

var modalInstance = $uibModal.open({
    templateUrl: 'myModalContent.html',
    scope: $scope, //passed current scope to the modal
    size: 'lg'
});

そうでない場合は、新しいcontrollerを作成し、そのコントローラーをmodalに割り当てて開く必要があります。

65
Pankaj Parkar

Resolveを使用すると、マップが特定のコントローラーに挿入されます。

モーダル機能を処理するために別のコントローラーを使用することをお勧めします（懸念の分離）。

また、コードの最小化をサポートするために、依存性注入を使用することをお勧めします。 ステップ5 Angularチュートリアルでこれを説明します。

モーダルコントローラーの簡単な例は次のようになります。

(function () {

    'use strict';

    var app = angular.module('App');

    app.controller('musicDetailController',

                ['$scope', '$uibModalInstance', 'items',
        function ($scope, $uibModalInstance, items) {

            $scope.items = items;

        }]);
}());
23
Justin

オブジェクトを直接渡すことはできません。

上記のすべてのソリューションを試しましたが、実際には満足していませんでした。提供された解決関数を使用して、stringsとobjectsの両方を直接モーダルに渡すことができる単純なパーサーを作成することで、この問題を解決しました。

app.controller('ModalController', ['$uibModal', '$scope', function ($uibModal, $scope) {

    // Initialize $modal
    var $modal = this;

    // Open component modal
    $modal.open = function (component, size, data) {

        // Init modal
        var modalInstance = $uibModal.open({
            ariaLabelledBy: 'modal-title',
            ariaDescribedBy: 'modal-body',
            component: component,
            size: size || 'md',
            resolve: parseResolve(data)
        });
    };

    // Parse the resolve object
    function parseResolve(data) {
        if (typeof data === 'string') {
            return {
                data: function() {
                    return data;
                }
            }
        }
        else if (typeof data === 'object') {
            var resolve = {};
            angular.forEach(data, function(value, key) {
                resolve[key] = function() {
                    return value;
                }
            })
            return resolve;
        }
    }

}]);

文字列を使用する場合

テンプレート：

<button ng-click="$modal.open('modalSomething', 'md', 'value'">
    Click
</button>

成分：

bindings: {
    resolve: '@'
}

オブジェクトを使用する場合

テンプレート：

<button ng-click="$modal.open('modalSomething', 'md', {key1: value1, key2: value2})">
    Click
</button>

成分：

bindings: {
    resolve: '<'
}
2
Jeffrey Roosendaal