0

AngularJS を使い始めたばかりです。ビュー/コントローラーとルートを追加しましたが、すべて正常に機能しています。しかし、別のコントローラーで別のルートを追加し始めるとすぐに、うまくいきません。以下は私のコードです、

<!doctype html>
<html ng-app='simpleApp'>
<body>

    <div data-ng-view=""></div>

    <script src="js/angular.js"></script>
    <script>
        var sampleModule = angular.module('simpleApp', []);
        var controllers = {};

        controllers.SimpleController = function($scope){            
        $scope.books = [    {title: "The book thief", author:"Unknown"}, 
                            {title:"Da Vinci Code", author:"Dan Brown"}, 
                            {title:"Gamperaliya", author:"Martin Wickremasinghe"}
                       ];       
        $scope.addTitle = function()
        {
            $scope.books.push({title:$scope.newTitle, author:$scope.newAuthor}  );
        }

        $scope.removeTitle = function()
        {
            $scope.books.pop({title:$scope.newTitle, author:$scope.newAuthor}   );
        }           
    }

    controllers.detailController = function ($scope)
    {
        $scope.abc = 'sdsdsd';
        $scope.titleDetail = $location.search.title;
        alert('dfdfd');
    }

    sampleModule.controller(controllers);

    sampleModule.config(function($routeProvider) {
        $routeProvider
            .when('/',
                {
                    controller: 'SimpleController',
                    templateUrl: 'third1.html'
                })
            .when('/detail/title/:titleId',
                {
                    controller: 'detailController',
                    templateUrl: 'third2.html'
                })
            .otherwise( {redirectTo: '/'    });
    });

</script>

third1.html が正常にロードされ、この本に関する詳細を提供する予定の third2.html をロードするためのリンクがあります。しかし、third2.html では、detailController または URL から開始された値を取得できません。{{ }} ディレクティブは評価しません。

何か助けはありますか？

Hは

4

2 に答える 2

1

メソッドには 2 つのcontrollerパラメーターが必要です。

1) コントローラの名前 2) コントローラを定義する関数

複数のコントローラーがある場合は、モジュールに登録されるように、コントローラーごとに 1 回呼び出す必要があります。

詳細については、ドキュメントを参照してください: http://docs.angularjs.org/guide/controller

あなたの場合、次のことができます：

sampleModule.controller('SimpleController', controllers.SimpleController);
sampleModule.controller('detailController', controllers.detailController);

また：

app.js

var sampleModule = angular.module('simpleApp', []);

sampleModule.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/',
            {
                controller: 'SimpleController',
                templateUrl: 'third1.html'
            })
        .when('/detail/title/:titleId',
            {
                controller: 'DetailController',
                templateUrl: 'third2.html'
            })
        .otherwise( {redirectTo: '/'    });
}]);

sampleModule.controller('SimpleController', ['$scope', function($scope) {            
    $scope.books = [    
        {title: "The book thief", author:"Unknown"}, 
        {title:"Da Vinci Code", author:"Dan Brown"}, 
        {title:"Gamperaliya", author:"Martin Wickremasinghe"}
    ];       
    $scope.addTitle = function()
    {
        $scope.books.push({title:$scope.newTitle, author:$scope.newAuthor}  );
    }

    $scope.removeTitle = function()
    {
        $scope.books.pop({title:$scope.newTitle, author:$scope.newAuthor}   );
    }           
}]);

sampleModule.controller('DetailController', ['$scope', function ($scope) {
    $scope.abc = 'sdsdsd';
    $scope.titleDetail = $location.search.title;
    alert('dfdfd');
}]);
于 2013-11-10T07:29:51.877 に答える
0

コードは使用している構造で機能しますが、jpmorin が回答で示した規則を使用することを強くお勧めします。

コードの問題の 1 つは、注入せずに使用$locationしていることです。detailController注入するには、次の$scopeように配置します。

controllers.detailController = function ($scope, $location)

ただし、ルート定義を使用すると、 を抽出するために使用する必要はあり'/detail/title/:titleId'ません。$location.search.titleIdtitleId

$location.search.titleIdtitleId次のようなクエリ文字列パラメーターを使用すると、 が取得されます。

'/detail/title?titleId=10'

しかし、あなたの URL は次のようになります (または、ルート定義に基づいてそうあるべきです):

'/detail/title/10'

代わりにtitleIdこの注入からを取得して、次のように使用するには:$routeParams$location

$scope.titleDetail = $routeParams.titleId;

これは、Angular 1.0.8 でコードを使用した実際のデモです: http://plnkr.co/edit/u8UAloLnEvFev3cJzVFu?p=preview

于 2013-11-10T08:10:59.683 に答える