AngularJS 1.2.19 雙向綁定不起作用

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 view 和homeCtrl ）在我調用時完美運行（兩種方式綁定都可以）並且自定義指令也可以正常工作。

但是第二條路線（ /common/views/genericText.view.html視圖和aboutCtrl ）存在問題。 自定義指令沒問題，但未顯示來自控制器的值。

我嘗試了幾個測試：

將 HTML 文件和控制器*.js文件放在同一目錄中。
在瀏覽器的控制台中顯示來自控制器的幾條消息，並在 html 中添加個性化注釋（檢查兩個文件是否都被請求並正確執行）
檢查 HTML（使用 Chrome 開發工具）視圖並檢查角度變量是否為空或沒有任何值。

他們都沒有成功。

我使用了 3 個自定義指令（導航欄、頁眉和頁腳）並且它們在 HTML 中正確呈現。 但是在控制器中創建的值不會被渲染，所以主體是空的。

這些是我的有問題的文件：

關於.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

第二條路線上的ControllerAs有一個大寫 C，並且鍵在 javascript 中區分大小寫。

AngularJS 1.2.19 雙向綁定不起作用

問題描述

1 個解決方案

解決方案1
1 2016-02-04 21:23:22

AngularJS 1.2.19 雙向綁定不起作用

問題描述

1 個解決方案

解決方案1 1 2016-02-04 21:23:22

解決方案1
1 2016-02-04 21:23:22