Question

我正在学习MEAN，现在我对使用AngularJS JavaScript v.1.2.19制作的前视图有疑问。

这是我的index.html

<!DOCTYPE html>
<html ng-app="loc8rApp">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
    <link rel="stylesheet" href="/stylesheets/style.css">
  </head>
  <body ng-view>
    <!--ng-view directive now sits in body tag so that we can control full page in Angular-->
    <!--script src="/angular/angular.min.js"></script-->
    <script src="/angular/angular.js"></script>
    <script src="/lib/angular-route.min.js"></script>
    <script src="/app.js"></script>
    <script src="/common/services/loc8rData.service.js"></script>
    <script src="/common/services/geolocation.service.js"></script>
    <script src="/common/directives/ratingStars/ratingStars.directive.js"></script>
    <script src="/common/directives/footerGeneric/footerGeneric.directive.js"></script>
    <script src="/common/directives/navigation/navigation.directive.js"></script>
    <script src="/common/directives/pageHeader/pageHeader.directive.js"></script>
    <script src="/common/filters/formatDistance.filter.js"></script>
    <script src="/home/home.controller.js"></script>
    <script src="/about/about.controller.js"></script>
    <script src="/javascripts/jquery-1.11.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
    <script src="/javascripts/validation.js"></script>
  </body>
</html>

这是我在客户端的app.js

    (function () {

       angular.module('loc8rApp', ['ngRoute']);

       function config ($routeProvider, $locationProvider) {
         $routeProvider
             .when('/', {
                 templateUrl: 'home/home.view.html',
                 controller: 'homeCtrl',
                 controllerAs: 'vm'
              })
             .when('/about',{
                 templateUrl: '/common/views/genericText.view.html',
                 controller: 'aboutCtrl',
                 ControllerAs: 'vm'
              })
              .otherwise({redirectTo: '/'});

         $locationProvider.html5Mode(true);
      }

      angular
          .module('loc8rApp')
          .config(['$routeProvider', '$locationProvider', config]);
    })();

第一个路径（home/home.view.html视图和homeCtrl）在我调用时完美地工作（2路绑定没问题），并且自定义指令也可以正常工作。

但是第二条路线（/common/views/genericText.view.html视图和aboutCtrl）存在问题。自定义指令没问题，但未显示控制器的值。

我尝试了几项测试：

将HTML文件和控制器*.js文件放在同一目录中。
在浏览器的控制台中显示来自控制器的多条消息，并在html中添加个性化评论（以检查是否请求并正确执行这两个文件）
检查HTML（使用Chrome开发工具）视图并检查角度变量是空的还是没有任何值。

所有这些都没有成功。

我使用3个自定义指令（导航栏，页眉和页脚），它们在HTML中正确呈现。但是在控制器中创建的值不会被渲染，因此正文是空的。

这些是我有问题的文件：

about.controller.js

    (function () {

        angular
         .module('loc8rApp')
         .controller('aboutCtrl', aboutCtrl);

        function aboutCtrl() {

           var vm = this;

           console.log('debug'); //shown console

           vm.pageHeader = {
               title: 'test',
               strapline: 'this is the strapline'
           };

           vm.main = {
               content: "this is the content"
           };

           vm.yeah = "this is for testing";

           console.log(vm.pageHeader.title); //shown at console
           console.log(vm.main.content); //shown console
           console.log(vm.yeah); //shown console
        }
    })();

和视图文件

    <!-- custom directive -->
    <navigation></navigation>



    <div class="container">
       <!-- custom directive -->
       <page-header content="vm.pageHeader"></page-header>

       <div class="row">
          <div class="col-xs-12 col-sm-8"> 
             <div>{{ vm.main.content }}</div>
             <div>{{ vm.yeah }}</div>
          </div>
       </div>

       <!-- custom directive -->
       <footer-generic></footer-generic>
    </div>

我还没有包含指令来源，因为它们在视图中正确显示。唯一的问题是控制器中的绑定值。

也许controller as语法存在问题，或者上下文存在问题，但我是新手，所以我无法找到有关正在发生的事情的任何线索。

Answer 1

您的第二条路线上的it 'verifies that the token is set' do expect(Invitation.count).to eq 0 Invitation.new().save(validate: false) expect(Invitation.count).to eq 1 expect(Invitation.first.token).not_to be_empty end中有一个大写字母C，并且密钥在javascript中区分大小写。

AngularJS 1.2.19双向绑定不起作用

1 个答案: