角UI模式最初沒有隱藏

Question

我下面這個angular recipes page添加一個模式對話框我的UI。它建議以下標記，我已將其添加到我的某個視圖中。

... html for my view is here ... 
<button class="btn" ng-click="open()">Open Modal</button> 
<div modal="showModal" close="cancel()"> 
    <div class="modal-header"> 
     <h4>Modal Dialog</h4> 
     ... etc, from the recipe doc 
</div> 

我想看到的是我的觀點，加上底部的「打開模式」按鈕，沒有別的。我所看到的卻是頁面上已經顯示的按鈕和模式的內容。

在配方DOC就在第二天的話是：

需要注意的是，即使我們沒有指定它明確的模式對話框 通過模態屬性最初是隱藏的。該控制器僅 處理按鈕點擊，並通過模態 屬性使用的ShowModal值。

爲什麼我的情態標記，在網頁上最初可見？我想我已經安裝角UI正確......在我的index.html：

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> 

而且在我的應用程序JS：

angular.module('MonteAdmin', [ 
    ... 
    'ui.bootstrap', 
    ... 
    ]) 

Answer 1

這食譜頁面可能已經過時了。在寫作的時候它可能已經能夠可變showModal傳遞給modal指令來顯示或隱藏它。在你的控制器，你就已經能夠通過範圍變量showModal設置爲true或false以顯示模式：

$scope.showModal = false; 

$scope.open = function() { 
    $scope.showModal = true; 
} 

的當前版本不這樣的。如果您在Angular UI Bootstrap

讀庫的官方文檔如果您使用的是最新版本的庫您將有更好的體驗，該指令不再modal但uib-modal。另外，你還需要做更多的工作來實現你的模態。

模態的標記應該是一個腳本標記，用類型設置爲text/ng-template按照官方的例子：

<script type="text/ng-template" id="stackedModal.html"> 
    <div class="modal-header"> 
     <h3 class="modal-title" id="modal-title-{{name}}">The {{name}} modal!</h3> 
    </div> 
    <div class="modal-body" id="modal-body-{{name}}"> 
     Having multiple modals open at once is probably bad UX but it's technically possible. 
    </div> 
</script> 

實際打開的模式，你按一下按鈕會觸發下面的例子功能：

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; 
    } 
    } 
}); 

還必須定義爲模態控制器，它本身：

angular.module('ui.bootstrap.demo').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'); 
    }; 
}); 

所有這些代碼是對角UI引導