jube-fork/Jube.App/wwwroot/kendo/examples/notification/angular.html

<!DOCTYPE html>
<html>
<head>
    <title>AngularJS</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/angular.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example" ng-app="KendoDemos">
    <div class="demo-section k-content" ng-controller="MyCtrl" style="overflow: auto;">

        <h4>Show notification:</h4>
        <p>
            <button class="k-button" ng-click="showPopup()">Popup bottom-right</button><br />
            <button class="k-button" ng-click="showInContainer()">Show in container</button><br />
            <button class="k-button" ng-click="dismissAll()">Dismiss all</button>
        </p>

        <script id="notificationTemplate" type="text/x-kendo-template">
       		<p style="width: 16em; padding:1em;white-space:nowrap"> {{ngValue}}, #= kValue # </p>
        </script>

        <span kendo-notification="notf1" k-options="notf1Options"></span>
        <span kendo-notification="notf2" k-append-to="'#container'"></span>

    </div>

    <div id="container" class="demo-section k-content"></div>

    <style>
        .demo-section {
            text-align: center;
            line-height: 4em;
        }
        .demo-section .k-button {
            width: 250px;
        }
    </style>
</div>

<script>
  angular.module("KendoDemos", [ "kendo.directives" ])
      .controller("MyCtrl", function ($scope) {

          $scope.notf1Options = {
              templates: [{
                  type: "ngTemplate",
                  template: $("#notificationTemplate").html()
              }]
          };

          $scope.ngValue = "Angular scope value";

          $scope.showPopup = function () {
              var date = new Date();
              date = kendo.toString(date, "HH:MM:ss.") + kendo.toString(date.getMilliseconds(), "000");

              $scope.notf1.show({
                kValue: date
              }, "ngTemplate");
          }

          $scope.showInContainer = function() {
              var date = new Date();
              date = kendo.toString(date, "HH:MM:ss.") + kendo.toString(date.getMilliseconds(), "000");
              $scope.notf2.show(date, "info");
          };
          $scope.dismissAll = function() {
              $scope.notf1.hide();
              $scope.notf2.hide();
          };
      })
</script>

    
</body>
</html>