Ui-bootstrap in AngularJS Tutorial

1. New uibootstrap.html page, introduce dependent JS and CSS library

2. New uibootstrap.js file, define a UIModule module, introduce dependence module

 / ** * Created by zhong on 2015/9/7. * / Var uimodule = angular.module ("UIModule", ["UI.Bootstrap", "UI.Router"]);}   
3. Define templates
4 defining the Dialog pop-up window. Define a UICONTROLLER and declare a function for opening the Dialog pop-up box

UIModule.Controller (“UiController”, Function ($ Scope, $ Modal) {// Open Dialog’s Function $ Scope.Opendialog = Function () {MODAL.OPEN ({TemplateURL: “MyModalContent.html”, // Dialog ID, id, idlim of Template, established with HTML, Controller: “MODALCONTROLLER” / / Specifies Dialog’s Controller});};})

  5. Defining the MODALCONTROLLLER  
of the Dialog pop-up box ( in this Controller to confirm and cancel the handle of the Click event

Controller (“MODALCONTROLLER”, FUNCTION ($Scope, $ modalInstance) {// Define the handle of the confirmation button in Dialog $ SCOPE.OK = function () {$ modalinstance.close (); //}; // Define the Click on the cancel button in Dialog Event processing function $ scope.cancel = function () {$ modalinstance.dismiss (‘ca Zancel’);}});
   5. In the UIBootstrap.html file Add a button for opening the window 

Open the pop-up window
  

The above is the small series to introduce UI-bootstrap in AngularJS, I hope to help everyone! Angularjs中的ui-bootstrap的使用教程

© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment