为什么这个 ng-idle 实现没有连接模式和样式？

Question

我正在尝试让 ng-idle 连接到 css 和 modal the way it looks in this working example at this link。我已经将 link 处的代码解释为意味着我应该键入下面的代码来实现它，但是下面的代码不会将控制器或样式挂接到视图。 需要对下面的代码进行哪些具体更改才能成功实现上面演示 link 中的 ng-idle，包括模态警告和按钮样式等？

可以通过 downloading a fully functioning MINIMAL reproduction by clicking the link to this file sharing site 在您的计算机上重新创建该情况，然后查看 index.html 和 app.js 的内容，目前如下：

index.html 是：

<html ng-app="demo">
  <head>
    <title title>NgIdle Sample</title> 
  </head>
  <body>

<section data-ng-controller="DemoCtrl">
{{ started }}  <!-- this SYSO of the `start` variable does not print -->
  <p>
    <button type="button" class="btn btn-success" data-ng-hide="started" data-ng-click="start()">Start Demo</button>
    <button type="button" class="btn btn-danger" data-ng-show="started" data-ng-click="stop()">Stop Demo</button>
 </p>
</section>

<script type="text/ng-template" id="warning-dialog.html">
  <div class="modal-header">
   <h3>You're Idle. Do Something!</h3>
  </div>
  <div idle-countdown="countdown" ng-init="countdown=5" class="modal-body">
   <progressbar max="5" value="5" animate="false" class="progress-striped active">You'll be logged out in {{countdown}} second(s).</progressbar>
  </div>

</script>
<script type="text/ng-template" id="timedout-dialog.html">
  <div class="modal-header">
   <h3>You've Timed Out!</h3>
  </div>
  <div class="modal-body">
   <p>
      You were idle too long. Normally you'd be logged out, but in this demo just do anything and you'll be reset.
   </p>
 </div>
</script>

    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/ng-idle/angular-idle.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>

    <script src="scripts/app.js"></script>
</body>
</html>

而app.js是：

'use strict';

angular.module('demo', ['ngIdle', 'ui.bootstrap'])
    .controller('DemoCtrl', function($scope, Idle, Keepalive, $modal){
      $scope.started = false;

      function closeModals() {
        if ($scope.warning) {
          $scope.warning.close();
          $scope.warning = null;
        }

        if ($scope.timedout) {
          $scope.timedout.close();
          $scope.timedout = null;
        }
      }

      $scope.$on('IdleStart', function() {
        closeModals();

        $scope.warning = $modal.open({
          templateUrl: 'warning-dialog.html',
          windowClass: 'modal-danger'
        });
      });

      $scope.$on('IdleEnd', function() {
        closeModals();
      });

      $scope.$on('IdleTimeout', function() {
        closeModals();
        $scope.timedout = $modal.open({
          templateUrl: 'timedout-dialog.html',
          windowClass: 'modal-danger'
        });
      });

      $scope.start = function() {
        closeModals();
        Idle.watch();
        $scope.started = true;
      };

      $scope.stop = function() {
        closeModals();
        Idle.unwatch();
        $scope.started = false;

      };
    })
    .config(function(IdleProvider, KeepaliveProvider) {
      IdleProvider.idle(5);
      IdleProvider.timeout(5);
      KeepaliveProvider.interval(10);
    })
 .run(['Idle', function(Idle) {
      Idle.watch();
    }]);

现在问题已经重现，需要对上面的代码进行哪些更改才能使其实现模态和样式，如 OP 顶部 link 中的 example/demo ？

Answer 1

在你 TARed 的项目中，有四件事：

您需要确保 ng-app="demo" 属性已添加到 html 或 body 元素。在 app.js 的这一行中定义应用程序模块时，应更改值 demo 以匹配您对应用程序的称呼：angular.module('demo', [/* etc. */])
确保包含 ui-bootstrap-tpls.min.js 而不是 ui-bootstrap.min.js；后者不包括指令的 HTML 模板（期望您自己提供），而前者包括。参见 UI-Bootstrap getting started guide.
您引用的 UI-Bootstrap 版本比我编写演示时使用的版本更新。 $modal 已重命名为 $uibModal，因此只需搜索并替换该标记即可。
确保在您的应用程序的 CSS 中包含 Bootstrap。您使用 Yeoman 生成器启动此应用程序，并且该生成器似乎将 Bootstrap SASS 编译为 styles/main.css.

其中一些东西（1、2 和 4）可能已经由 Yeoman 生成器为您设置好，而您为了粘贴 ng-idle 演示代码而将其拆开。

这是你的index.html（删除了所有注释掉的内容）：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="styles/main.css">
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
</head>

<body ng-app="demo">
  <!--[if lte IE 8]
  <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  [endif]//-->

  <div class="header">
    <div class="navbar navbar-default" role="navigation">
      <div class="container">
        <div class="navbar-header">

          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="#/">client</a>
        </div>

        <div class="collapse navbar-collapse" id="js-navbar-collapse">

          <ul class="nav navbar-nav">
            <li class="active"><a href="#/">Home</a></li>
            <li><a ng-href="#/about">About</a></li>
            <li><a ng-href="#/">Contact</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="container">
    <div ng-view="">
      <section data-ng-controller="DemoCtrl">
        {{ started }}
        <!-- this SYSO of the `start` variable does not print -->
        <p>
          <button type="button" class="btn btn-success" data-ng-hide="started" data-ng-click="start()">Start Demo</button>
          <button type="button" class="btn btn-danger" data-ng-show="started" data-ng-click="stop()">Stop Demo</button>
        </p>
      </section>
    </div>
  </div>

  <div class="footer">
    <div class="container">
      <p><i class="fa fa-heart"></i> from the Yeoman team</p>
    </div>
  </div>

  <script type="text/ng-template" id="warning-dialog.html">
    <div class="modal-header">
      <h3>You&apos;re Idle. Do Something!</h3>
    </div>
    <div idle-countdown="countdown" ng-init="countdown=5" class="modal-body">
      <progressbar max="5" value="5" animate="false" class="progress-striped active">You&apos;ll be logged out in {{countdown}} second(s).</progressbar>
    </div>

  </script>
  <script type="text/ng-template" id="timedout-dialog.html">
    <div class="modal-header">
      <h3>You&apos;ve Timed Out!</h3>
    </div>
    <div class="modal-body">
      <p>
        You were idle too long. Normally you&apos;d be logged out, but in this demo just do anything and you&apos;ll be reset.
      </p>
    </div>
  </script>

  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
  <script src="bower_components/angular-animate/angular-animate.js"></script>
  <script src="bower_components/angular-aria/angular-aria.js"></script>
  <script src="bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="bower_components/angular-messages/angular-messages.js"></script>
  <script src="bower_components/angular-resource/angular-resource.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="bower_components/angular-touch/angular-touch.js"></script>
  <script src="bower_components/ng-idle/angular-idle.min.js"></script>
  <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

  <script src="scripts/app.js"></script>
  <script src="scripts/controllers/main.js"></script>

</body>

</html>

这里是app.js：

  'use strict';
  angular.module('demo', ['ngIdle', 'ui.bootstrap'])
    .controller('DemoCtrl', function($scope, Idle, Keepalive, $uibModal){
      $scope.started = true;

      function closeModals() {
        if ($scope.warning) {
          $scope.warning.close();
          $scope.warning = null;
        }

        if ($scope.timedout) {
          $scope.timedout.close();
          $scope.timedout = null;
        }
      }

      $scope.$on('IdleStart', function() {
        closeModals();

        $scope.warning = $uibModal.open({
          templateUrl: 'warning-dialog.html',
          windowClass: 'modal-danger'
        });
      });

      $scope.$on('IdleEnd', function() {
        closeModals();
      });

      $scope.$on('IdleTimeout', function() {
        closeModals();
        $scope.timedout = $uibModal.open({
          templateUrl: 'timedout-dialog.html',
          windowClass: 'modal-danger'
        });
      });

      $scope.start = function() {
        closeModals();
        Idle.watch();
        $scope.started = true;
      };

      $scope.stop = function() {
        closeModals();
        Idle.unwatch();
        $scope.started = false;

      };
    })
    .config(function(IdleProvider, KeepaliveProvider) {
      IdleProvider.idle(5);
      IdleProvider.timeout(5);
      KeepaliveProvider.interval(10);
    })
    .run(['Idle', function(Idle) {
      Idle.watch();
    }]);

我尊重亲身实践的方法来了解事物的工作原理，但我建议您稍微踩刹车并了解 Angular、您的 yeoman 生成器 Bootstrap 之间的关系，UI-Bootstrap，和 ng-idle，以及如何使用这些东西。

为什么这个 ng-idle 实现没有连接模式和样式？

Why isn't this ng-idle implementation connecting modal and styling?

javascript

angularjs

node.js

modal-dialog

ng-idle