使用VisualStudio中的AngularJS和ASP.NET创建模态对话框

2 年 ago
科, 雅
2 minutes
ModalSample.png

执行步骤：
1. 从AngularJS_VisualStudio_DialogService.git的网站上下载并解压zip文件
2. 点击解决方案（.sln）文件以启动Visual Studio
3. 执行（Ctrl + F5）

図1.png

1. 配置 index.html 文件
注意事项：需要添加 Angular-Sanitize、Angular-UIBootstrap 和 Bootstrap 本体。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">

<head>
    <title></title>
    <!--Angular そのもの-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
    <!--Angular Sanitize-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.4.8/angular-sanitize.js"></script>
    <!--Angular UI Bootstrap-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>
    <!--Bootstrap-->
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

    <!--angular-dialog-service 本体-->
    <script src="/dialog/dialogs.min.js"></script>
    <link href="/dialog/dialogs.min.css" rel="stylesheet" />

    <script src="/js/controller.js"></script>

</head>
<body>
    <div ng-controller="MyCtrl">
        <button class="btn btn-primary" ng-click="Open()">Open Dialog</button>
    </div>
</body>
</html>

设定controller.js

var main = angular.module("app", ['ui.bootstrap','dialogs.main']);

main.controller('MyCtrl',['$scope','dialogs',function ($scope,dialogs) {
    $scope.Open = function () {
        dialogs.notify('Something Happened', 'Something happened at this point in the application that I wish to let you know about');
    }
}]);

3. 当调用方法时，可以更改Notify、Error、Wait的格式。

sample.png
   dialogs.notify('Something Happened', 'Something happened at this point in the application that I wish to let you know about');
　　dialogs.error('Error', 'An unknown error occurred preventing the completion of the requested action.');
   dialogs.wait('Creating User', 'Please wait while we attempt to create user "Michael Conroy."<br><br>This should only take a moment.', 50);

结束

bannerAds