UI 부트 스트랩 모달에서 HTML 마크 업을 전달하는 방법

UI 부트 스트랩을 사용하여 모달 대화 상자를 만듭니다. "templateUrl"을 사용하고 "ng-template"을 사용하여 html 템플릿을 포함하면 잘 작동합니다. 하지만 여러 개의 모달 대화 상자가있는 경우 "ng-template"을 사용하여 페이지의 모든 html 템플릿을 포함시킨 후 내 페이지가 점점 더 커지고 있습니다. 내가 "templateUrl"를 사용하는 대신 직접 HTML 마크 업을 사용할 수있는 방법이 있나요UI 부트 스트랩 모달에서 HTML 마크 업을 전달하는 방법

angular.module('mydemo', ['ngAnimate', 'ui.bootstrap']); 
angular.module('mydemo').controller('myCtrl', function ($scope, $uibModal, $log) { 

    $scope.open = function (size) { 

    var modalInstance = $uibModal.open({ 
     templateUrl: 'myContent.html', 
     controller: 'ModalInstanceCtrl', 
     size: size 
    }); 
    }; 
}); 

angular.module('mydemo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance) { 
    $scope.cancel = function() { 
    $uibModalInstance.dismiss('cancel'); 
    }; 
});

: HTML

<head> 
    <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular-animate.js"></script> 
    <script data-require="[email protected]" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script> 
    <script src="script.js"></script> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
</head> 

<body> 
    <div ng-controller="myCtrl"> 
    <script type="text/ng-template" id="myContent.html"> 
     <div class="modal-header"> 
     <h3 class="modal-title">I'm a modal!</h3> 
     </div> 
     <div class="modal-body"> 
     Modal body content goes here... 
     </div> 
     <div class="modal-footer"> 
     <button class="btn" type="button" ng-click="cancel()">Close</button> 
     </div> 
    </script> 

    <button type="button" class="btn btn-default" ng-click="open()">Show modal</button> 
    </div> 

</body> 
</html>

자바 스크립트 : 여기

코드인가? 아니면 HTML 템플릿을 ng-template을 사용하는 페이지에 포함하는 대신 별도의 파일로 유지할 수있는 방법이 있습니까? 다음은 작동 예제입니다. http://plnkr.co/edit/HqThAG79r22K2VGZSs2D?p=preview

출처

2016-06-02 SatAj

네, 당신은 모달을로드 할 콘텐츠를 나타내는 몇 가지 옵션이 있습니다.

으로 @Wes 대답과 그의 plunker 포크 증명, 당신은 당신의 응용 프로그램에서 어딘가에 외부 HTML 파일을 생성 할 수 있습니다, 예상대로만큼 당신이 파일에 대한 올바른 경로를 지정으로, 모달 작동합니다.
링크 된 플러 크커를 이미 작업 했으므로 스크립트 type="text/ng-template" 태그 안에 템플릿을 넣고 모달 구성에 id 속성 값을 참조 할 수 있습니다.

마지막 방법은 모달 설정에서 html을 인라인하는 것입니다.

var modalInstance = $uibModal.open({ 
    template: '<div class="modal-header">' + 
       '<h3 class="modal-title">I\'m a modal!</h3>' + 
      '</div>' + 
      '<div class="modal-body">' + 
       'Modal body content goes here...' + 
      '</div>' + 
      '<div class="modal-footer">' + 
       '<button class="btn" type="button" ng-click="cancel()">Close</button>' + 
      '</div>', 
    controller: 'ModalInstanceCtrl', 
    size: size 
});

이 방법 Here's your plunker forked with the html directly added to the template property of the modal config as a string.는 잘 작동하지만, 조금 성가신, 쓰기, 읽고, 템플릿 마크 업의 양에 따라 유지 될 수 있습니다.

출처

2016-06-03 02:19:34

감사합니다. Bennette – SatAj

@ BennettAdams 두 번째 방법에 대해 더 자세히 설명해 주시겠습니까? –

@CanetRobern, 물론. 템플리트는 다른 템플리트 (모달을 호출 할 때 이미로드 된 상위 또는 추상 템플리트)의 스크립트 태그에 넣을 수 있습니다. 스크립트는'id'와'type' 속성을 필요로합니다. 'id = "my-modal-template"과'type = "text/ng-template"'을 사용합니다. 그리고'modalInstance' 설정에서'template'보다는'templateUrl' 속성을 사용할 것이고 값은 스크립트에서 템플릿의'id'가 될 것입니다. –

언제나 일반 html을 사용할 수 있습니다. 여기에 업데이트하여 plnkr는 :

http://plnkr.co/edit/v0BYhg3ojCgy7eiebRvR?p=preview

이것은 단지 당신이 HTML 파일의 경로를 알고 있어야합니다.

<!DOCTYPE html> 
<html ng-app="mydemo"> 

<head> 
    <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular.min.js"></script> 
    <script data-require="[email protected]" data-semver="1.5.5" src="https://code.angularjs.org/1.5.5/angular-animate.js"></script> 
    <script data-require="[email protected]" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script> 
    <script src="script.js"></script> 
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
</head> 

<body> 
    <div ng-controller="myCtrl"> 
    <button type="button" class="btn btn-default" ng-click="open()">Show modal</button> 
    </div> 

</body> 
</html>

하고 새 myContent.html

<div class="modal-header"> 
    <h3 class="modal-title">I'm a modal!</h3> 
    </div> 
    <div class="modal-body"> 
    Modal body content goes here... 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" type="button" ng-click="cancel()">Close</button> 
    </div>

출처

2016-06-02 22:31:41 Wes

감사 웨스. 하지만 외부 HTML 템플릿을 전달하는 대신 모달로 HTML 마크 업을 전달할 수있는 UI 부트 스트랩의 옵션이 있습니까? – SatAj

여기에 $templateCache을 사용한 또 하나의 해결책이 있습니다.

갈래의 plunker가 여기에 있습니다 : http://plnkr.co/edit/ukqmThpvi4aRGLZEiSSe?p=preview

JS -

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

app.run(function($templateCache){ 

    $templateCache.put('tplcache/myContent.htm', 
    '<div class="modal-header">' + 
     '<h3 class="modal-title">I\'m a modal!</h3>' + 
     '</div>' + 
     '<div class="modal-body">' + 
     'Modal body content goes here...' + 
     '</div>' + 
     '<div class="modal-footer">' + 
     '<button class="btn" type="button" ng-click="cancel()">Close</button>' + 
     '</div>'); 

})

JS를 templates.js - 모달 설정

var modalInstance = $uibModal.open({ 
    templateUrl: 'tplcache/myContent.htm', 
    controller: 'ModalInstanceCtrl', 
    size: size 
});

HTML 스크립트 (템플릿을 포함한다.주요 애플 리케이션 후 JS)

<script src="script.js"></script> 
    <script src="templates.js"></script>

HTML 본문

<body> 
    <div ng-controller="myCtrl"> 
    <button type="button" class="btn btn-default" ng-click="open()">Show modal</button> 
    </div> 
</body>

출처

2016-06-03 19:04:50 Brian

UI 부트 스트랩 모달에서 HTML 마크 업을 전달하는 방법

답변

관련 문제