دليل الاستخدام لـ ui-bootstrap في Angularjs

1. قملالتانجاءليا بيادنل تالبياجلن مسنجاتءجانين ختيءال بيادنل خالنجنانين تالنجنانين

2. قملالتانجاءليا بيالدنل تالبياجلن مسنجاتءجانين ختيءال بيادنل خالنجنانين تالنجنانين

/**
 * Created by zhong on 2015/9/7.
 */
var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]);
});

3. تعريفلالمنيانجنال بيادنل

4. تعريفلالتاءل مسنجاتءجانين مدجتياتاءن ختيءال بيادنل نتجلناناءن

uiModule.controller("UiController",function($scope,$modal){
//وظيفة فتح dialong
$scope.openDialog = function(){
$modal.open({
  templateUrl:"myModalContent.html",//معرف dialong، يجب أن يكون متطابقًا مع id في template الذي تم إنشاؤه من html
controller:"ModalController"//تحديد controller للـ dialog
});
 };
});

5. تعريف نافذة الـ dialog ModalController

يُعلن في هذا controller عن معالج أحداث النقر على زر الاعتماد والإلغاء في النافذة المنبثقة

controller("ModalController",function($scope, $modalInstance){
//تحديد معالج أحداث النقر على زر الاعتماد في dialong
$scope.ok = function(){
$modalInstance.close();//
};
//تحديد معالج أحداث النقر على زر إلغاء في dialong
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
 }
});

5. أضف زرًا في ملف uiBootstrap.html لفتح النافذة

<div ng-controller="UiController">
 <button ng-click="openDialog()" class="btn btn-default">فتح نافذة منبثقة</button>
</div>

6. تأثير

إضافة:

ما تم ذكره أعلاه هو دليل الاستخدام الخاص بـ ui-bootstrap في Angularjs الذي قدمه لك المحرر، آمل أن يكون مفيدًا لك جميعًا！