Hộp thoại chất liệu Angularjs không hoạt động

Question

Tôi có một mảng các mục mà tôi muốn xuất trong một hộp thoại. Tôi không gặp lỗi, nhưng nó cũng không hoạt động.

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

này sẽ mở một hộp thoại cảnh báo như chỉ ra here Khi chúng tôi thử demo code Tôi đã nhận lỗi, rằng "cảnh báo" không được định nghĩa.

Mẫu trông như thế này:

<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> 

Bất kỳ ý tưởng những gì tôi đang làm sai ở đây? Không có lỗi AngularJS và không có hộp thoại.

Cảm ơn bạn :)

Answer 1

Bạn nên sử dụng $mdDialog.show Thay vì $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 
     } 
    }); 

Đây là một mẫu mdDialog

Answer 2

Trong trường hợp của tôi, tôi có thể theo dõi các lời khẩn cầu $ mdDialog.show() phương thức gọi trong trình gỡ lỗi, và không có lỗi xuất hiện trong giao diện điều khiển, nhưng không có hộp thoại xuất hiện. Nó được chứng minh là một vấn đề CSS, trong đó mẫu mà tôi đang sử dụng chứa các phần tử có chỉ mục z cao hơn so với các thành phần được tạo bởi hộp thoại MD, che giấu hiệu quả thông điệp của hộp thoại.

Các cập nhật quy tắc CSS sau đây là một cách tiếp cận để giải quyết vấn đề (trên cơ sở rằng tôi không muốn chạm vào mẫu tự):

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