最簡單的角度用戶界面引導模式

Question

我想知道如果我可以簡化UI-bootstrap的模式，像bootstrap中的原始模式，因爲角度是一堆代碼，我真的與ui-bootstrap有一個噩夢用於角度的模態。看起來代碼只是用於定製模式等，但你需要添加功能打開等。

如果我需要其他模板與其他模板？或者如果我需要很多模態？

這是我從ui-bootstrap參考幫助獲得的代碼。我試圖刪除所有不知道的代碼，但仍然太複雜。

VIEW

<div ng-controller="ModalDemoCtrl as $ctrl" class="modal-demo"> 
    <script type="text/ng-template" id="myModalContent.html"> 
     <div class="modal-header"> 
      <h3 class="modal-title" id="modal-title">I'm a modal!</h3> 
     </div> 
     <div class="modal-body" id="modal-body"> 
      <ul> 
       <li ng-repeat="item in $ctrl.items"> 
        <a href="#" ng-click="$event.preventDefault(); $ctrl.selected.item = item">{{ item }}</a> 
       </li> 
      </ul> 
      Selected: <b>{{ $ctrl.selected.item }}</b> 
     </div> 
     <div class="modal-footer"> 
      <button class="btn btn-primary" type="button" ng-click="$ctrl.ok()">OK</button> 
      <button class="btn btn-warning" type="button" ng-click="$ctrl.cancel()">Cancel</button> 
     </div> 
    </script> 


    <button type="button" class="btn btn-default" ng-click="$ctrl.open('lg')">Large modal</button> 
</div> 

APP

// MODAL CONTROLLERS 
myApp.controller('ModalDemoCtrl', function ($uibModal, $log, $document) { 
    var $ctrl = this; 
    $ctrl.items = ['item1', 'item2', 'item3']; 

    $ctrl.animationsEnabled = true; 

    $ctrl.open = function (size, parentSelector) { 
     var parentElem = parentSelector ? 
     angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined; 
     var modalInstance = $uibModal.open({ 
      animation: $ctrl.animationsEnabled, 
      ariaLabelledBy: 'modal-title', 
      ariaDescribedBy: 'modal-body', 
      templateUrl: 'myModalContent.html', 
      controller: 'ModalInstanceCtrl', 
      controllerAs: '$ctrl', 
      size: size, 
      appendTo: parentElem, 
      resolve: { 
       items: function() { 
        return $ctrl.items; 
       } 
      } 
     }); 

     modalInstance.result.then(function (selectedItem) { 
      $ctrl.selected = selectedItem; 
     }, function() { 
      $log.info('Modal dismissed at: ' + new Date()); 
     }); 
    }; 

    $ctrl.openComponentModal = function() { 
     var modalInstance = $uibModal.open({ 
      animation: $ctrl.animationsEnabled, 
      component: 'modalComponent', 
      resolve: { 
       items: function() { 
        return $ctrl.items; 
       } 
      } 
     }); 

     modalInstance.result.then(function (selectedItem) { 
      $ctrl.selected = selectedItem; 
     }, function() { 
      $log.info('modal-component dismissed at: ' + new Date()); 
     }); 
    }; 

    $ctrl.openMultipleModals = function() { 
     $uibModal.open({ 
      animation: $ctrl.animationsEnabled, 
      ariaLabelledBy: 'modal-title-bottom', 
      ariaDescribedBy: 'modal-body-bottom', 
      templateUrl: 'stackedModal.html', 
      size: 'sm', 
      controller: function($scope) { 
       $scope.name = 'bottom'; 
      } 
     }); 

     $uibModal.open({ 
      animation: $ctrl.animationsEnabled, 
      ariaLabelledBy: 'modal-title-top', 
      ariaDescribedBy: 'modal-body-top', 
      templateUrl: 'stackedModal.html', 
      size: 'sm', 
      controller: function($scope) { 
       $scope.name = 'top'; 
      } 
     }); 
    }; 

    $ctrl.toggleAnimation = function() { 
     $ctrl.animationsEnabled = !$ctrl.animationsEnabled; 
    }; 
}); 

// Please note that $uibModalInstance represents a modal window (instance) dependency. 
// It is not the same as the $uibModal service used above. 

myApp.controller('ModalInstanceCtrl', function ($uibModalInstance, items) { 
    var $ctrl = this; 
    $ctrl.items = items; 
    $ctrl.selected = { 
     item: $ctrl.items[0] 
    }; 

    $ctrl.ok = function() { 
     $uibModalInstance.close($ctrl.selected.item); 
    }; 

    $ctrl.cancel = function() { 
     $uibModalInstance.dismiss('cancel'); 
    }; 
}); 

// Please note that the close and dismiss bindings are from $uibModalInstance. 

myApp.component('modalComponent', { 
    templateUrl: 'myModalContent.html', 
    bindings: { 
     resolve: '<', 
     close: '&', 
     dismiss: '&' 
    }, 
    controller: function() { 
     var $ctrl = this; 

     $ctrl.$onInit = function() { 
      $ctrl.items = $ctrl.resolve.items; 
      $ctrl.selected = { 
       item: $ctrl.items[0] 
      }; 
     }; 

     $ctrl.ok = function() { 
      $ctrl.close({$value: $ctrl.selected.item}); 
     }; 

     $ctrl.cancel = function() { 
      $ctrl.dismiss({$value: 'cancel'}); 
     }; 
    } 
}); 

正如你所看到的，是一串代碼。唯一想我要的是有舊的時尚道路的選擇，如：

我與形式上ID按鈕

我模式與內容

顯然，這是不可能的ui-bootstrap，任何幫助將被折扣

Answer 1

我必須同意你對這一個，我發現文檔對我來說有點冗長。如您所見，我的templateURL在包含模態內容的相同目錄中引用了單獨的.html文件。

這裏是我的解決方案是什麼樣子：

在我的控制器：

myApp.controller('ModalController', function ($log, $uibModal, $scope) { 
    $log.debug('ModalController'); 

    this.createModal = function() { 
    let modal = $uibModal.open({ 
     backdrop: 'static', 
     keyboard: true, 
     backdropClick: false, 
     template: require('./modal-content.html'), 
     scope: $scope 
    }); 

    $scope.modalInstance = modal; 
    return modal.result; 
    }; 

    this.triggerModal = function() { 
    this.createModal() 
    .then((data) => { 
     this.handleSuccess(data); 
    }) 
    .then(null, (reason) => { 
     this.handleDismiss(reason); 
    }); 
    }; 

    this.yes = function() { 
    $scope.modalInstance.close('Yes Button Clicked'); 
    }; 

    this.no = function() { 
    $scope.modalInstance.dismiss('No Button Clicked'); 
    }; 

    this.handleSuccess = function(data) { 
    $log.info('Modal closed: ' + data); 
    }; 

    this.handleDismiss = function(reason) { 
    $log.info('Modal dismissed: ' + reason); 
    }; 
} 

這裏是 '模式，content.html' 的內容是這樣的：

<div class="modal-header"> 
    <h3 class="modal-title">I'm a modal!</h3> 
</div> 
<div class="modal-body"> 
    <ul> 
    <li>item 1</li> 
    <li>item 2</li> 
    <li>item 3</li> 
    </ul> 
</div> 
<div class="modal-footer"> 
    <button class="btn btn-primary" ng-click="landingModalCtrl.yes()">yes</button> 
    <button class="btn btn-warning" ng-click="landingModalCtrl.no()">no</button> 
</div> 

。希望幫助！