데이터를 부트스트랩모달에 전달하는 AngularJS

데이터를 부트스트랩모달에 전달하는 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>

나는 당신이 이 일을 통과하기를 제안합니다.scope자신의 컨트롤러에 접속할 수 있습니다.controller다시 한 번, 이렇게 함으로써,resolve또한.

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

그렇지 않으면 새로 작성해야 합니다.controller그 컨트롤러의 할당은modal열어보면서.

resolve를 사용하면 맵이 지정된 컨트롤러에 삽입됩니다.

다른 컨트롤러를 사용하여 모달 기능을 처리할 것을 권장합니다(문제의 분리).

또한 종속성 주입을 사용하여 코드 최소화를 지원할 것을 권장합니다.Angular 자습서의 5단계에서는 이에 대해 설명합니다.

모드 컨트롤러의 간단한 예는 다음과 같습니다.

(function () {

    'use strict';

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

    app.controller('musicDetailController',

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

            $scope.items = items;

        }]);
}());

개체를 직접 전달할 수 없습니다.

위의 모든 솔루션을 시도해 봤지만 만족하지 못했습니다.이 문제를 해결하려면 간단한 파서를 작성해야 합니다.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: '<'
}

다음 코드가 작동합니다.

this.OpenModal = function() {
        var modalInstance = $uibModal.open({
            url: "/name?parameter=" + $scope.Object.ParamValue,
            templateUrl: 'views/module/page.html',
            controller: myController
        });
    }

언급URL : https://stackoverflow.com/questions/33286851/angularjs-passing-data-to-bootstrap-modal