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 中获取值。它不评估 {{ }} 指令。

有什么帮助吗？

伊什

4

2 回答 2

1

该controller方法需要 2 个参数：

1) 控制器的名称 2) 定义控制器的函数

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

有关详细信息，请参阅文档：http: //docs.angularjs.org/guide/controller

在你的情况下，你可以这样做：

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

或者：

应用程序.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 在他的回答中显示的约定。

您的代码的一个问题是您$location在detailController没有注入它的情况下使用它。要注入它，请将它放在旁边，$scope如下所示：

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

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

$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 回答