AngularJS 모달 상자 템플릿 ngDialog 사용 사례 공유

이번에는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!