AngularJSのtempale用コントローラを作成して使用します

Question

私はAngularでソートしようとしています。そのテンプレートのコンテナとコントローラに任意のテンプレートを使用して独自のモーダルを作成したい

angular.module('common') 
.service('MyModalService', ['$rootScope', '$compile', 
        function ($rootScope, $compile) { 
    var service = this, 
     scope; 

    // params = { 
    //  templateUrl: string, 
    //  controller: function/array, 
    //  bindings: object, 
    //} 
    service.show = function (params) { 
     scope = $rootScope.$new(true); 
     // what to do with controller?!?!? 
     // how inject dependencies? 
     // how bind bindings to $ctrl? 
     var element = $compile('<div id="my-modal-container"><ng-include src="params.templateUrl"></ng-include></div>')(scope); 
     body.append(element); 
    }; 
}]); 

Answer 1

私はあなただけのモーダルを表示するには、すべてこれを実行する必要があると思う、あなたはモーダルのUI-ブートストラップを使用することができますいけないの$ injector.instantiate（）関数

angular.module('common') 
.service('MyModalService', ['$rootScope', '$compile', '$injector', 
         function ($rootScope, $compile, $injector) { 
    var service = this, 
     scope; 

    // params = { 
    //  templateUrl: string, 
    //  controller: function/array, 
    //  locals: object, 
    //} 
    service.show = function (params) { 
     scope = $rootScope.$new(true); 

     // wrap controller function in array 
     if (!params.controller) { 
      params.controller = [new Function]; 
     } else if (!Array.isArray(params.controller)) { 
      params.controller = [params.controller]; 
     } 

     var controllerFunction = params.controller.splice(params.controller.length - 1)[0]; 
     controllerFunction.$inject = params.controller; 
     scope.$ctrl = $injector.instantiate(controllerFunction); 
     angular.merge(scope.$ctrl, params.locals); 
     scope.templateUrl = params.templateUrl; 

     var element = $compile('<div id="my-modal-container"><ng-include src="templateUrl"></ng-include></div>')(scope); 
     body.append(element); 
    }; 
}]);