Angularjsコントローラが私の式を壊しています

AngularjsでCodeSchoolコースを終了しましたが、現在の私のウェブサイトを更新するのが面倒です。面倒なことに、私がコントローラや命令コードを書くと、うまくいきません。しかし、他の人のコードを使ってうまく動作しているようです。したがって、私は強く、私のアプリケーションコードで何かが間違っていると思うが、私は私の人生のためにそれを見つけるように見えない。Angularjsコントローラが私の式を壊しています

省略されたコードは...omitで表され、実際に関連していて間違っている場合に利用できます。

<!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'：

ここでは、関連するHTMLだ、私はそれに比べていくつかの回を読んで、ソリューションの無数のページを検索した

(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

コードに複数のエラーがあります。あなたは

(function() { })();

角度はもはや内部定義されていない操作を行うと

<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

それは素晴らしいですが、私はそれらのエラーが何であるか知りたいと思います。私はそれを簡単にしたいと思っています。しかし私の焦点は拡張可能です。 –

$ httpの代わりにcontrollerの中に$ scopeを定義する必要があります。オブジェクト自体を定義することなく、オブジェクトのプロパティを直接定義することはできません。さらに... Lyndaを試してみましょう。 – Deadpool

後で$ httpを使用してjsonをロードしようとしていましたが、ありがとうございました。 CodeSchoolコースでこれを使用するように教えたので、私はそれをチェックします。 $ scopeの代わりに。私はJavaやC++のようなネイティブのoopに慣れていますが、わかりやすくJSには慣れていません。 –

次の例を使用してコーディングする簡単な方法で行きます。

（FYI：上記自己実行匿名関数である http://markdalgleish.com/2011/03/self-executing-anonymous-functions/。）

だから、あなたは、コントローラの内部でも

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

にそれを変更する必要があります。この

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

を追加

'this'を使用しないでくださいが、変数に再割り当てすることをお勧めしますうんざりすることはありません。そうすれば、$ scopeを使う必要はありません（後のバージョンでは削除されます）

また、これらのエラーを解消するには、クロムやIEの開発ツールを見てください。すべての角度エラーは、関連するページへのリンクを持っています。あなたのエラーは '角度'になっていますが、定義されていません。

出典

2016-05-24 08:59:05 woutervs

Angularjsコントローラが私の式を壊しています

答えて

関連する問題