AngularJS，第二個控制器不工作

我剛開始使用AngularJS。我添加了一個視圖/控制器和路由，它的工作正常。但只要我開始添加另一個路線與不同的控制器，事情不起作用。以下是我的代碼，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中啓動的值。它不評估{{}}指令。

任何幫助？

的Ish

來源

2013-11-10 Ish

你不能在同一時間這樣添加多個控制器。您需要爲每個控制器調用'sampleModule.controller（'FirstControllerName'，controllers.FirstController）;''。此外，我建議你閱讀文檔，並遵循下面的例子：http://docs.angularjs.org/guide/controller – jpmorin

@jpmorin：我認爲你可以，那應該工作AFAIK。 – elclanrs

@elclanrs：它會工作，但我不會推薦它（personnally）。 – jpmorin

雖然你的代碼將與你所在的結構一起工作唱歌，我強烈推薦使用jpmorin在他的回答中顯示的約定。

您的代碼存在一個問題，那就是您在detailController中使用了$location而未注入它。要注入它旁邊放置它$scope這樣的：

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

然而，隨着路線定義'/detail/title/:titleId'這不是你需要使用提取titleId$location.search.titleId。

$location.search.titleId使用的查詢字符串參數這樣的時候會得到titleId：

'/detail/title?titleId=10'

但你的URL將（或應該根據你的路由定義）是這樣的：

'/detail/title/10'

要從titleId這個注入$routeParams而不是$location並使用它是這樣的：

$scope.titleDetail = $routeParams.titleId;

下面是使用帶有角1.0.8您的代碼工作演示：http://plnkr.co/edit/u8UAloLnEvFev3cJzVFu?p=preview

來源

2013-11-10 08:10:59 tasseKATT

感謝隊友的完整答案。 – Ish

的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'); 
}]);

來源

2013-11-10 07:29:51 jpmorin

謝謝隊友。按照我所做的方式，缺點是什麼？ – Ish

AngularJS，第二個控制器不工作

回答

相關問題