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

【问题标题】：generic functionality to open bootstrap $modal with Object values使用 Object 值打开 bootstrap $modal 的通用功能
【发布时间】：2014-11-12 10:37:24
【问题描述】：

我创建了控制器来打开 $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');
        };

    }]);

【问题讨论】：

也许您需要scope 属性？
@dfsq 我正在为此目的制定指令

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

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

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) {
        }
    };
}]);

【讨论】：