Angularjs控制器正在破壞我的表情

我剛剛完成了Angularjs上的CodeSchool課程，並且一直在更新當前的我的網站。有趣的是，如果我寫控制器或指令代碼，它不起作用。但似乎使用其他人的代碼工作正常。因此，我強烈懷疑我的應用程序代碼有問題，但我似乎無法爲我的生活找到它。Angularjs控制器正在破壞我的表情

省略代碼由...omit表示，如果其實際相關且我錯了，則可用。

下面是相關的HTML：

<!DOCTYPE html> 
<html ng-app="main" lang="en"> 
<head> 
    ...omit 
    <!--Script Includes--> 
    <script src="/script/jquery.min.js"></script> 
    <script src="/script/bootstrap.min.js"></script> 
    <script src="/script/angular.min.js"></script> 
    <script src="/script/main.js"></script> 
</head> 
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
    ...omit 
    <div class="container content"> 
     ...omit 
     <div id="schedule"> 
      <h1>See us in Concert</h1> 
      <ul class="list-group" ng-controller="ScheduleController as schedCtrl"> 
       <li class="list-group-item">{{ 5 + 5 }}</li> 
       <li class="list-group-item">Highlights <span class="badge">{{schedCtrl.highlight.count}}</span></li> 
       <li class="list-group-item">Upcoming <span class="badge">{{schedCtrl.now.count}}</span></li> 
       <li class="list-group-item" ng-repeat="next in schedCtrl.future">{{next.month}} <span class="badge">{{next.count}}</span></li> 
      </ul> 
     </div> 
     ...omit 
    </div> 
</body> 
</html>

和 'main.js'：

(function() { 
    'use strict'; 
    var app = angular.module('main', [ ]); 

    app.controller('ScheduleController', [$http, function ($http) { 
     // Some test data 
     this.highlight.count = 2; 
     this.now.count = 5; 
     this.future = [{month: "June", count: 7}, {month: "July", count: 4}]; 
    }]); 
})();

我已經讀了好幾遍，並尋找解決無數的網頁，但我似乎無法得到它的工作。而不是將表達式視爲表達式，而是將它們視爲文本，將表達式本身打印出來。

來源

2016-05-24 Luke Samuel

您的代碼有多個錯誤。去通過編碼使用下面的示例中的更簡單的方法：

<html> 
<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head> 
<body ng-app="myApp" ng-controller="myCtrl"> 
    <div class="container content"> 
     <div id="schedule"> 
      <h1>See us in Concert</h1> 
      <ul class="list-group"> 
       <li class="list-group-item">{{ 5 + 5 }}</li> 
       <li class="list-group-item">Highlights <span class="badge">{{highlight.count}}</span></li> 
       <li class="list-group-item">Upcoming <span class="badge">{{now.count}}</span></li> 
       <li class="list-group-item" ng-repeat="x in future">{{x.month}} <span class="badge">{{x.count}}</span></li> 
      </ul> 
     </div> 
<script> 
//module declaration 
var app = angular.module("myApp",[]); 
//controller declaration 
app.controller('myCtrl',function($scope){ 
    // Some test data 
    $scope.highlight = {count:2}; 
    $scope.now = {count : 5}; 
    $scope.future = [{month: "June", count: 7}, {month: "July", count: 4}]; 
}); 
</script> 
</body> 
</html>

來源

2016-05-24 06:22:40 Deadpool

這很棒，但我想知道那些錯誤是什麼。我明白你想簡化它;但我的重點是可擴展的。 –

您需要在控制器中定義$ scope而不是$ http。您無法直接定義對象的屬性而無需定義對象本身。另外...嘗試Lynda，它有更好的教程。 – Deadpool

我以後會使用$ http加載json，但是謝謝。我會檢查一下，因爲CodeSchool課程教會使用它。而不是$ scope。這對我來說沒有任何意義，因爲我習慣於像Java或C++這樣的本地OOP，但是我沒有像JS那樣經歷JS。 –

當你

(function() { })();

角不再被內部定義。

（FYI：以上是自執行的匿名函數 http://markdalgleish.com/2011/03/self-executing-anonymous-functions/。）

所以，你必須將其更改爲

(function (angular) {})(angular);

也是你的控制器中添加此

var self = this; 
self.highlight.count =2;

最好不要使用'this'，而是將其重新分配給一個變量，這樣您的範圍不要搞砸了。這樣就沒有必要使用$範圍（這將在更高版本中下降）

此外，要找出這些錯誤，看看你的開發工具鉻或IE什麼JavaScript錯誤，你會得到。所有的角度錯誤都鏈接到相關頁面。雖然你的錯誤將是'角'是未定義的。

來源

2016-05-24 08:59:05 woutervs

Angularjs控制器正在破壞我的表情

回答

相關問題