使用Object值打开bootstrap $ modal的通用功能

时间:2014-11-12 10:37:24

标签: javascript angularjs angular-ui-bootstrap

我已经创建了控制器来打开$ modal。现在如何制作打开$ modal的常用方法。我还需要将一些对象传递给$ modal模板。

下面我创建了控制器,我可以将其作为常用方法。但是,我需要在打开$ modal [不使用工厂]

时传递对象数据

HTML:

<a class="view-all" href="#" ng-controller="MoreDetailControllerbasic" 
  ng-click="get_form('login')">+ add more</a>

使用Javascript:

    viewmoreApp.controller('MoreDetailControllerbasic', ['$scope', '$http', '$compile', '$modal',
    function($scope, $http, $compile, $modal) {

        $scope.data="i am trying to send this Dataaaaaaaaaaaaaaaaaaaaaa";
        $scope.get_form = function(form) { 
            debugger;
            $scope.form = form;
            templateUrl = "/form/" + form + ' ';

            modalInstance = $modal.open({
                templateUrl : '/view_more',
                controller : 'MoreDetailController',
                //backdrop : 'static'
                resolve: {
                        GalleryData: function () {
                            return $scope.data;
                        },

                    }

            });

            modalInstance.result.then(function() {
                //Get triggers when modal is closed
            }, function() {

                //gets triggers when modal is dismissed.
            });

        };


    }]);

    viewmoreApp.controller('MoreDetailController', ['$scope', '$http', '$compile', '$modalInstance','GalleryData',
    function($scope, $http, $compile, $modalInstance,GalleryData) {
        $scope.data_list=GalleryData;
        $scope.greetings="Welcome to wiki ";
        $scope.closeModal = function() { debugger;
            $modalInstance.dismiss('cancel');
        };

    }]);

1 个答案:

答案 0 :(得分:0)

我通过在属性中创建指令和激情数据来解决我的问题。

viewmoreApp.directive("viewMore", ['$cookies', '$http', '$compile', '$timeout', '$modal',
function($cookies, $http, $compile, $timeout, $modal) {
    return {
        restrict : "A",
        scope : {
             mySelection: "@",
        },
        template : "<div>Click For More</div>",
        controller : function($scope, $element, $attrs, $compile) {
            alert('directive init()');
            $element.bind('click', function() {

                modalInstance = $modal.open({
                    templateUrl : '/view_more',
                    controller : 'MoreDetailController',
                    //backdrop : 'static'
                    resolve : {
                        GalleryData : function() {
                            return $attrs.mySelection;
                        },
                    }

                });

                modalInstance.result.then(function() {
                    //Get triggers when modal is closed
                }, function() {

                    //gets triggers when modal is dismissed.
                });
            });

        },
        replace : true,
        transclude : true,
        link : function(scope, element, attrs) {
        }
    };
}]);