이번에는 AngularJS모달 상자 템플릿 ngDialog 사용 사례 공유를 가져왔습니다. AngularJS 모달 상자 템플릿 ngDialog를 사용할 때 Notes는 무엇인지, 다음은 실제 사례입니다. 살펴보겠습니다.
프로젝트가 시작되었을 때 우리가 사용한 대화 상자는 AngularJS의 $modal 모달 상자였지만 나중에 $modal로 열린 대화 상자가 페이지에 비해 정적이라는 것을 발견했습니다. 경험은 매우 좋지 않을 것입니다. $scope를 전달할 때 $modal이 그다지 유연하지 않은 이유도 있어서 나중에 $ngDialog로 전환했습니다.
공식 API는 여기에 있습니다:https:// www.npmjs.com/package/ng-dialog
먼저 프로젝트에 $ngDialog에 필요한 관련 파일이 설치되어 있는지 확인하세요.
다음 간단한 데모
del.html 내용은 다음과 같습니다. 이는 대화 상자의 내용입니다. 여기에서는 확인 대화 상자만 있으면 됩니다.
<meta charset="UTF-8"> <p class="modal-header"> <h4 class="modal-title">删除</h4> </p> <p class="modal-body"> <form autocomplete="off" class="file-brief file-brief-show form-validation" name="ObsForm" id="form-new-style"> <p class="col-sm-12 m-t-xs m-b-xs "> <p class="form-group"> <label>您确认要删除吗?</label> </p> </p> </form> </p> <p class="modal-footer"> <button type="submit" class="btn" ng-click="confirm()" >确定</button> <button type="button" class="btn" ng-click="cancel()">取消</button> </p>
컨트롤러에 메서드를 추가하세요.
$scope.del = function () { ngDialog.open({ template: '/del.html', className: 'ngdialog-theme-default', scope: $scope, controller: function ($scope) { ... $scope.confirm = function () { ... }; $scope.cancel = function () { $scope.closeThisDialog(); }; } }); };
여기 실제로 템플릿은 경로입니다. 대화 상자가 단순하다면 템플릿에
속성만 추가하면 됩니다.
대화 상자의 높이와 너비. 상자는 사용자 정의할 수 있습니다. 너비: 500,//절대 너비. 또는 너비:'%50' //상대 너비
위의 두 가지 사항을 고려하여 예:
$scope.delBucket = function () { ngDialog.open({ template: '<p class="modal-header"><h4 class="modal-title">删除Bucket</h4></p>' + '<p class="modal-footer"><button type="submit" class="btn" ng-click="confirm()" >确定</button>'+ '<button type="button" class="btn" ng-click="cancel()">取消</button></p>', plain:true, className: 'ngdialog-theme-default', width:600, scope: $scope, controller: function ($scope) { ... $scope.confirm = function () { ... }; $scope.cancel = function () { $scope.closeThisDialog(); }; } }); };
위는 단순한 예일 뿐이며 공식 문서에도 ID별로 대화 상자를 여는 등 관련 세부 사항이 있습니다. 확인 대화 상자 열기 등.
기본적으로 공식 API를 번역하는 $ngDialog를 소개하는 매우 자세한 기사도 있습니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
Node.js Express 설치 및 사용 단계 자세한 설명
노드 프런트엔드 개발 템플릿 엔진 Jade 사용 단계 자세한 설명
위 내용은 AngularJS 모달 상자 템플릿 ngDialog 사용 사례 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!