15

私は、次のように抽出した非常に単純な Angular アプリを持っています。

var napp = angular.module('Napp',['ngResource']);

var CompanyCtrl = function($scope, $routeParams, $location, $resource) {
    console.log($routeParams);
};


napp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
    .when('/company/edit/:id', 
      {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}
    );
}]);

そしてHTML：

<div ng-controller="CompanyCtrl"></div>

$routeParams をログに記録すると、空白になります。.otherwise() を使用すると、そこで指定したものがすべて読み込まれます。私が見逃しているものはありますか？

4

7 に答える 7

10

いくつかのエラーがあります：

  1. <div ng-controller="CompanyCtrl"></div>ビュー ( ) と $routeProvider ( )の 2 つの場所でコントローラーを指定しました.when('/company/edit/:id', {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}。ビュー内のものを削除します。

  2. $routeProvider でコントローラーを指定するときは、コントローラーをモジュールに登録する必要があります (とにかくこれを行う必要があります。グローバル コントローラーは避けたほうがよいでしょう)。napp.controller('CompanyCtrl', function ...の代わりに行うvar CompanyCtrl = function ...。

  3. $route サービスを使用している場合は、 ng-viewを指定する必要があります(これを行っているかどうかは不明です)。

新しいコード:

var napp = angular.module('Napp', ['ngResource']);

napp.controller('CompanyCtrl', function ($scope, $routeParams, $location, $resource) {
  console.log($routeParams);
});

napp.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/company/edit/:id',
      {templateUrl: '/partials/edit', controller: 'CompanyCtrl'}
    );
}]);

テンプレート (/parials/edit)

<div> ... </div>

そしてアプリ（index.htmlなど）

... <body> <div ng-view></div> </body>

動作するプランカーの例を作成しました: http://plnkr.co/edit/PQXke2d1IEJfh2BKNE23?p=preview

于 2013-06-17T18:37:15.360 に答える
9

まずはこれでやってみる

$locationProvider.html5Mode(true);

これで開始コードが修正されます。次に、pushState 以外のブラウザーをサポートするようにコードを調整します。

お役に立てれば！

于 2013-06-17T18:45:49.733 に答える
3

これが役立つかどうかはわかりませんが、私は自分でこの問題に遭遇し、何かがバインドされるまでルートパラメーターをログに記録できないことがわかりました。
そう、

ルーター:

var myApp = angular.module('myApp', []);
myApp.config(function($routeProvider){

  $routeProvider.when('/projects/:id', 
    {templateUrl: '/views/projects/show.html', controller: 'ProjectCtrl'}
  );

});

コントローラ：

myApp.controller('ProjectCtrl', function($scope, $routeParams){
  $scope.id = $routeParams.id;
  console.log('test');
});

意見：

<h1>{{ id }}</h1>

ビューから「{{id}}」を削除すると、少なくともコントローラーのインスタンス化の時点では、何も記録されず、$routeParams は空でした。上記の回答のいくつかが指摘しているように、ルート パラメーターは非同期で渡されるため、そのプロパティへのバインディングを持たないコントローラーは実行されません。したがって、スニペットを何から抽出したのか正確にはわかりませんが、これがお役に立てば幸いです!

于 2013-06-18T19:39:09.030 に答える
2

ui-routerの代わりに使用している場合、これは（OPの場合ではなく）発生する可能性がありますngRoute。

その場合は、$stateParams代わりに を使用し$routeParamsます。

https://stackoverflow.com/a/26946824/995229

于 2015-09-06T18:43:25.170 に答える
0

それは私のために働きますhttp://plunker.co/edit/ziLG1cZg8D8cYoiDcWRg?p=preview

ただし、コードにいくつかのエラーがあります。

  • コードにngViewがないようです。は$routeProviderを使用してngView、テンプレートのコンテンツを挿入する場所を認識します。したがって、ページのどこかに必要です。

  • CompanyCtrl2 か所で指定しています。で指定するか、$routeProviderを使用してテンプレートで指定する必要がありますng-controller。テンプレートで指定するのが好きですが、それは個人的な好みです。

  • エラーではありませんが、を使用してモジュールCompanyCtrlに登録するのではなく、グローバル スコープで指定しています。NappNapp.controller(name, fn)

お役に立てれば！
いつでも freenode の #angularjs IRC チャンネルにアクセスできます: アクティブな人々がいつでも助けてくれます

于 2013-06-17T19:03:27.637 に答える