AngularJS綁定似乎不起作用

我對Angular相當陌生，並且一個簡單的綁定對我不起作用。AngularJS綁定似乎不起作用

它只是顯示我和{{trip.created}}正如他們寫的。

我的控制器：

(function() { 
    "use strict"; 
    angular.module("app-trips") 
     .controller("tripsController", tripsController); 

    function tripsController() { 
     var vm = this; 
     vm.trips = [{ 
      name: "US Trip", 
      created: new Date() 
     }, { 
      name: "World Trip", 
      created = new Date() 
     }];

我的課的一部分：

@section Scripts { 
    <script src="~/lib/angular/angular.min.js"></script> 
    <script src="~/js/app-trips.js"></script> 
    <script src="~/js/tripsController.js"></script> 
} 
<div class="row" ng-app="app-trips"> 

    <div ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3"> 
     <table class="table table-responsive table-striped"> 
      <tr ng-repeat="trip in vm.trips"> 
       <td>{{ trip.name }}</td> 
       <td>{{ trip.created }}</td> 
      </tr> 
     </table> 
    </div>

控制器的看法：

(function() { 
    "use strict"; 
    angular.module("app-trips", ['ngSanitize']); 
})();

BTW - 按說根據我的過程以下，我不需要['ngSanitize']，但沒有它，它甚至不顯示DIV s。

編輯：作爲@jellyraptor注意到，我曾與=，而不是一個錯字：

編輯2：

這是錯字+的[ngSanitize]我真的沒有需要。我修正了錯字，並傳遞了一個空數組，一切正常。謝謝全部

來源

2017-08-28 sagi

這是一個猜測。基於它沒有'['ngSanitize']'不起作用的事實，似乎你從未真正創建過角度模塊。當您向'angular.module（moduleName，[數組相關性]）提供第二個（數組）參數時，會創建該模塊。如果沒有這個數組，角度將表達式視爲一個getter而不是一個setter。 – ryanyuyu

因爲您使用的是controllerAs語法，此處變量爲vm。因此對於訪問範圍對象使用的vm代替tripsController

<tr ng-repeat="trip in vm.trips"> 
    <td>{{ trip.name }}</td> 
    <td>{{ trip.created }}</td> 
</tr>

(function() { 
 
    "use strict"; 
 
    angular.module("app-trips", []); 
 
})(); 
 

 
    angular.module("app-trips") 
 
    .controller("tripsController", tripsController); 
 

 
    function tripsController() { 
 
    var vm = this; 
 
    vm.trips = [{ 
 
     name: "US Trip", 
 
     created: new Date() 
 
    }, { 
 
     name: "World Trip", 
 
     created: new Date() 
 
    }]; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> 
 
<div ng-app="app-trips" ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3"> 
 
    <table class="table table-responsive table-striped"> 
 
    <tr ng-repeat="trip in vm.trips"> 
 
     <td>{{ trip.name }}</td> 
 
     <td>{{ trip.created }}</td> 
 
    </tr> 
 
    </table> 
 
</div>

來源

2017-08-28 15:39:20

對不起，這是一個錯字，我在嘗試解決這個問題時將其改爲tripsController。這對我沒有幫助。 – sagi

在控制檯中顯示什麼錯誤？ –

沒有..如果有一個我會在網上搜索答案.. – sagi

要麼角沒有加載或它遇到錯誤。用F12調出開發工具，看看控制檯是否有錯誤。同樣在控制檯中，您可以鍵入'angular'並按回車，如果它報告角度未定義，那麼角度加載不正確。

來源

2017-08-28 15:44:16

控制檯是空的，我可以在哪裏可以輸入CONSOL？：S – sagi

我在'Debugger'部分打了'angular'，發現這行：'' – sagi

取決於瀏覽器。通常，控制檯輸出的底線是您可以輸入的地方。在控制檯窗口中查找'>'或'>>'。 –

您在您的旅程數組的第二個對象的「已創建」屬性中加上了一個等號。

vm.trips = [{ 
    name: "US Trip", 
    created: new Date() 
}, { 
    name: "World Trip", 
    created = new Date() 
}];

應該

vm.trips = [{ 
    name: "US Trip", 
    created: new Date() 
}, { 
    name: "World Trip", 
    created: new Date() 
}];

來源

2017-08-28 15:53:34 JellyRaptor

謝謝你的看法！現在我在控制檯中出現錯誤。請參閱編輯 – sagi

AngularJS綁定似乎不起作用

回答

相關問題