현재 views/foo.html일반보기로 사용 하고 있습니다.
이보기에 다음이 있다고 가정합니다.
<p>Hello</p>
이제 views/foo.html모달의 콘텐츠 로 재사용 하고 싶지만 다음과 같이 래핑하고 싶습니다.
<div class="modal-header">
<h3 class="modal-title">Foo</h3>
</div>
<div class="modal-body">
<!-- I want to include views/foo.html in here -->
</div>
따라서 모달은 다음과 같습니다.
<div class="modal-header">
<h3 class="modal-title">Foo</h3>
</div>
<div class="modal-body">
<p>Hello</p>
</div>
모달 호출자는 다음과 같습니다. (주석에 유의하십시오)
$scope.openFooModal = function () {
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'views/foo.html', /* HERE I NEED TO WRAP IT */
controller: 'fooController',
scope: modalScope,
size: 'lg'
});
modalInstance.result.then(function (result) {
}, null);
};
최상의 솔루션은 무엇입니까?
foo2.html을 만들어야합니까?
그래서 마지막에는 JB Nizet이 작성한 주석이 시작으로 작동했지만이 문제가있었습니다. $ uibModal이 시작하지 않은 컨트롤러에 $ uibModalInstance 주입
이것이 내가 마침내 한 일입니다.
모달을 열거 나 ng-view로 표시하는 것을 담당하는보기 :
<body ng-controller="indexController">
<ul>
<li>
<a href="" ng-click="openModal()">Open as modal</a>
</li>
<li>
<a href="#nonmodal">Open as non modal</a>
</li>
</ul>
<div ng-view=""></div> <!-- Used by routeProvider -->
</body>
... 컨트롤러
angular.module('myApp').controller('indexController', ['$scope','$uibModal', function($scope,$uibModal) {
$scope.openModal = function () {
var modalScope = $scope.$new();
var modalInstance = $uibModal.open({
templateUrl: 'foo-as-modal.html',
controller: 'fooController',
scope: modalScope
});
modalScope.modalInstance = modalInstance;
// ^ I'm giving the modal his own reference
// using the scope. Injecting wont work on
// the non-modal case!
modalInstance.result.then(function (result) {
}, null);
};
}]);
모달 또는 비 모달로 재사용 할보기 :
<p>Hello {{name}}</p>
컨트롤러 :
angular.module('myApp').controller('fooController', ['$scope', function($scope) {
// ^
// I'm not injecting
// uibModalInstance
// (this is important)
$scope.name = "John";
$scope.cancel = function () {
$scope.modalInstance.dismiss('cancel');
// ^ I can access the modalInstance by the $scope
};
}]);
모달 (래퍼)로 사용할보기
<div class="modal-header">
<h3 class="modal-title">I'm a modal</h3>
</div>
<div class="modal-body">
<ng-include src="'foo.html'"></ng-include> <!-- Credits to JB's comment -->
</div>
<div class="modal-footer">
<button class="btn btn-default" ng-click="cancel()">Close</button>
</div>
routeProvider
$routeProvider
.when('/nonmodal', {
templateUrl: 'foo.html',
controller: 'fooController'
})
다음은 플 런커입니다 : https://plnkr.co/edit/ZasHQhl6M5cCc9yaZTd5?p=info
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다