web-dev-qa-db-ja.com

AngularJS ng-controllerが機能しない

w3schools からAngularJSの学習を始めました。私は彼らがチュートリアルで言及したことのある例を実践しようとしています。すべてが正常に動作しますが、「AngularJS Controllers」に来たとき、 w3schools Try it Yourself" で適切に動作しているので適切に動作していません。私はこれにコードを分岐しました 中央の例 。私のスクリプトは次のようになります。

function personController($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
}

私を助けて、良いチュートリアル（または無料のPDFファイル）を提案してください。

javascripthtmlangularjsangularjs-controller
21
UiUx

これはあなたの修正フィドルです。

angularの場合、コントローラーの定義は次のようにする必要があります。

angular.module("app", []).controller("personController", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

そして、間違いなく、Angular）のbasicsを学習するためのこれまでで最高のチュートリアルはCodeSchoolone！

お役に立てれば。

22
Kutyel

これは新しいアプローチです。モジュールなしではコントローラーを使用できなくなりました。 this をご覧ください。モジュールを追加してコントローラーを追加するだけで問題ありません。

11
katmanco

あなたのjsフィドルを修正しました。 中央の例 を確認してください

function personController($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
}

JSフィドル設定onLoadからNo wrap-in headを除いて、コードに問題はありませんでした

enter image description here

5
khichar.anil

モジュール内のパラメーターとして関数を入力する必要があります

var app = angular.module('app',[]);
app.controller('personController',function($scope){
  $scope.firstName = 'John';
  $scope.lastName = 'Smith';
});
1
latifalbr

np-app="myApp"のようなhtmlのタグに<html ng-app = "myApp">を追加することで、私のコードは正常に動作します。

1
Samreen Quyyum

アプリケーションモジュールを作成してから、コントローラーを追加する必要があります。 In angularそれはすべて依存関係に関するものです。2番目にアプリ名が必要です。基本チュートリアルはメインページにあります： https://docs.angularjs.org/tutorial/ step_ 私はそれで始めました、そしてそれは私と一緒にうまく働きました。ただステップ1から始まるすべてのステップをしてください。

1
Beri

これは「Angular Controller Not Working」の一般的な検索結果であるため、「コントローラーが動作しない」問題を解決するソリューションを追加すると役立つと思いました。

$routeProviderがコントローラーファイルとtemplateUrlパーシャルを指している基本ルートがあります：

$routeProvider.when('/', {
    templateUrl: 'partials/home.html',
    controller: 'homePage'
});

他にもいくつかのルートがあり、それらのコントローラーはすべて機能していましたが、何らかの理由で最初のルートでは機能しませんでした。結局のところ、パーシャルに小さな論理エラーがあり、コントローラーコードが実行できませんでした。

ちょっとした間違いですが、コントローラーコードの実行を妨げるパーシャルのロジックの問題であることに不意を突かれました。コンソールエラーが存在していても、問題が私の「JavaScript」にないため、発見するのを認めるよりもはるかに時間がかかりました。密結合されたフロントエンドコードの楽しさ、アミライト？

1
Benjamin Solum

同じ問題は、ngAppを別のngAppにネストしようとする場合です。

ドキュメントには次のように書かれています：

AngularJS applications cannot be nested within each other.

0
Yevgeniy Afanasyev