Как использовать модальные всплывающие окна в angularjs-ui bootstrap

Question

Я использую angularjs. То, что я хочу сделать, - это когда пользователь нажимает кнопку, angularjs проверяет идентификатор элемента в базе данных. Если в базе данных существует идентификатор элемента, #modal будет отображаться вместо предупреждения, как этот вопрос. Можно ли это сделать с помощью угловых? Если это возможно, как ..

HTML

<div id="container" ng-app='two_way' ng-controller="aa" > 
<div align="center"> 
<h1 align="center"> Nutrition Scheduling List </h1> 
     <button ng-click="loadsched()" >LOAD SCHEDULE</button> 
</div> 
<span ng-hide="load==null"> 
<table border='1' bgcolor="CCFFFF" align="center"> 
<tr ><td><b>Item Name</b></td><td><b>Scheduled Time</b></td><td><b>Run Time</b></td><td><b>Create Time</b></td><td><b>Status</b></td><td><b>Response</b></td></tr> 
<tr ng-repeat="data in load | orderBy: 'searchitem'"> 
    <td> 
     {{data.searchitem}} 
     </td> 
    <td> 
     {{data.Scheduledtime}} 
     </td> 
    <td> 
     {{data.runt}} 
     </td> 
    <td> 
     {{data.CurrentTime}} 
     </td> 
    <td> 
     {{data.STATUS}} 
     </td> 
    <td> 
<input type="button" class="btn btn-lg btn-primary" value="RESPONSE" onclick="window.open('http://localhost:3000/search/{{data._id}}','popUpWindow','height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');"> 
     </td> 
</tr> 
</table> 
</span> 
    <script src="more.js"></script> 
    </div> 

Контроллер more.js

var app=angular.module('two_way', ['ui.bootstrap']); 
app.controller('aa',function($scope,$http){ 

$scope.loadsched=function(){ 

    $http.post("http://localhost:3000/a").success(function(data){  
//console.log(data); 

    $scope.load=angular.fromJson(data); 



    }).error(function(){alert("Error");}); 
} 


}); 

Answer 1

Очень просто: -

1) Применить $ режимные к вашему основному контроллеру.

2) Используйте $modal.open(), чтобы открыть модальный вариант, и он вернет обещание.

$modal.open({ 
     templateUrl: 'myModalContent.html', 
     controller: 'ModalInstanceCtrl', 
     size: size 
); 

Здесь шаблон является файлом или идентификатором вашего модального шаблона. размер: см, lg Контроллер это контроллер вашего модального. Например: -

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) { 

    $scope.items = items; 
    $scope.selected = { 
    item: $scope.items[0] 
    }; 

    $scope.ok = function() { 
    $modalInstance.close($scope.selected.item); 
    }; 

    $scope.cancel = function() { 
    $modalInstance.dismiss('cancel'); 
    }; 
}); 

сервис $ modalInstance используется, чтобы закрыть и вернуть обещание от модально.

$modalInstance.close($scope.selected.item); закрыть модальные и вернуть данные контроллеру.

$modalInstance.dismiss('cancel'); просто уволен контроллер.

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

Здесь modalInstance.result используется для получения данных из модального управления для основного контроллера.

Официальный Plunker