angular.js - angularjs $modal的用法

Question

如何使用angularjs $modal编写一个公用的弹框插件？望详解，谢谢。

给我你的怀抱 · Answer

아이디어를 말씀드리지만 자세히 설명하지는 않겠습니다. 다른 사람에게 다가가는 것을 좋아하지 않기 때문입니다... 계획을 알려드리겠습니다. 최소한 두뇌를 사용하여 생각해 보세요. .

우선 다음 코드는 ui-bootstrap의 $modal을 사용하지 않고 ng-strap의 $modal을 사용합니다. 그 이유는 후자가 전자보다 코드 품질이 좋다고 생각하지만 후자가 상대적으로 새롭고 API는 전자만큼 완벽하지는 않습니다. 따라서 상대적으로 탄탄한 실무 능력이 필요하지만 이는 다음에 이야기할 $modal 서비스의 확장과 관련이 없습니다.

두 번째로 공개 $modal 서비스를 확장하기 전에 다음 문제를 고려해야 합니다.

무엇을 재사용할 수 있나요? 매번 새로 지정해야 하는 것은 무엇입니까? (템플릿, 매개변수, 메소드 등)
예상되는 통화 방법은 무엇인가요? 반환 결과는 어떻게 되나요?
확장성과 유연성 요구 사항은 얼마나 됩니까?

처음에는 이러한 질문에 대한 명확한 답이 없지만, 서비스 작성 방법이 결정되므로 마음속으로 답을 시뮬레이션해야 합니다.

첫 번째 단계는 기본 매개변수를 준비하는 것입니다. 이는 원본 $modal에서 제공하는 매개변수입니다. 먼저 (필요에 따라) 초기 상태를 설정하세요. 으아악

2단계: 새 서비스가 원래 $modal과 동일한 속성 확장 기능을 가질 수 있도록 새 서비스의 속성 확장 코드를 작성합니다. 으아악

그런 다음

의 정의가 있고 최종 반환은 $promise이므로 호출자가 비즈니스 논리를 확장할 수 있습니다. 핵심 사항에 몇 가지 설명을 추가했으며 나머지는 스스로 이해할 수 있습니다. 으아악

통화 예:ConfirmModal 으아악

템플릿의 경우 원본 $modal을 참조하여 직접 다시 작성하세요. 코드는 github에서 확인할 수 있습니다.