Диалоговое окно диалога Angularjs не работает

Question

У меня есть массив элементов, которые я хочу вывести в диалоговом окне. Я не получаю ошибку, но она не работает.

$scope.showDialog = function (ev) { 
     $mdDialog.alert({ 
     controller: 'DialogController', 
     controllerAs: 'DiaCtrl', 
     templateUrl: 'softwareused.tmpl.html', 
     parent: angular.element(document.body), 
     targetEvent: ev, 
     locals: { 
      items: cvLibsUsed 
     } 
    }); 
}; 

Это должно открыть диалоговое окно предупреждения, как отметил here Когда я попробовал demo code я получил ошибку, что «предупреждение» не определен.

Шаблон выглядит следующим образом:

<md-dialog aria-label="Software used"> 
<md-dialog-content> 
    <h2>Software used</h2> 
    <ul> 
     <li ng-repeat="cur in locals.items"><a ng-href="{{cur.url}}">{{cur.desc}}</a> - (<a 
       ng-href="{{cur.licenceUrl}}">{{cur.licence}}</a> 
      ) 
     </li> 
    </ul> 
</md-dialog-content> 
<md-dialog-actions layout="row"> 
    <md-button class="md-icon-button" ng-click="close()" aria-label="Close dialog" md-autofocus> 
     Close 
    </md-button> 
</md-dialog-actions> 

Любая идея, что я делаю неправильно здесь? Нет ошибки AngularJS и никакого диалога.

Спасибо :)

Answer 1

Вы должны использовать $mdDialog.show Вместо $mdDialog.alert

$scope.showDialog = function (ev) { 
     $mdDialog.show({ 
     controller: 'DialogController', 
     controllerAs: 'DiaCtrl', 
     templateUrl: 'softwareused.tmpl.html', 
     parent: angular.element(document.body), 
     targetEvent: ev, 
     locals: { 
      items: cvLibsUsed 
     } 
    }); 

Вот пример mdDialog

Answer 2

В моем случае, я мог проследить призыванием Вызов метода $ mdDialog.show() внутри отладчика, и никаких ошибок не появилось в консоли, но диалоговое окно не появилось. Это оказалось проблемой CSS, где шаблон, который я использовал, содержал элементы с z-индексом выше, чем те, которые используются компонентами, составляющими диалог MD, эффективно скрывая диалоговое сообщение.

Следующие обновления правил CSS были один подход к решению проблемы (на том основании, что я не хотел трогать сам шаблон):

.md-scroll-mask { z-index: 2000; } 
md-backdrop.md-dialog-backdrop { z-index: 2019; } 
.md-dialog-container { z-index: 2020; }