Question

我刚开始使用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>

第三个.html成功加载，它有一个链接加载third2.html，我希望提供有关该书的更多详细信息。但在third2.html中，我无法获取detailController或URL中启动的值。它没有评估{{}}指令。

任何帮助？

的Ish

Answer 1

controller方法需要2个参数：

1）控制器的名称 2）定义控制器的功能

如果您有多个控制器，则必须为每个控制器调用一次，以便它们在模块中注册。

有关详细信息，请参阅文档：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');
}]);

Answer 2

虽然您的代码将使用您正在使用的结构，但我强烈建议您使用他的答案中显示的jpmorin约定。

您的代码存在的一个问题是，您在$location中使用detailController而未注入该代码。要注入它，请将它放在$scope旁边，如下所示：

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

但是，使用路径定义'/detail/title/:titleId'，您需要使用$location.search.titleId来提取titleId。

使用查询字符串参数时，

$location.search.titleId将获得titleId：

'/detail/title?titleId=10'

但是您的网址（或者应该根据您的路线定义）看起来像这样：

'/detail/title/10'

要从此注入titleId而不是$routeParams获取$location并使用它，请执行以下操作：

$scope.titleDetail = $routeParams.titleId;

以下是使用Angular 1.0.8代码的工作演示：http://plnkr.co/edit/u8UAloLnEvFev3cJzVFu?p=preview

AngularJS，第二个控制器不工作

2 个答案: