2016-06-20 71 views
2

我開始使用Angular路線。當我通過將代碼放入控制器文件並將html放入html文件來定義someNameController的角度路由時,控制器似乎不能很好地與html綁定。但是,它與我的其他控制器正常工作。入門 - 控制器未定義函數

鏈接我曾嘗試: ngRoute not working. is there something i am doing wrong angularjs ngRoute not working https://docs.angularjs.org/error/ng/areq?p0=controllers%2FsomeNameController&p1=not%20a%20function,%20got%20undefined

的index.html

<!DOCTYPE HTML> 
    <html> 
     <head> 
      <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 

      <script src="bower_components/angular/angular.min.js"></script> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> 

      <script src="app.js"></script> 
      <script src="config.js"></script> 
      <script src="controllers/someNameController.js"></script> 

     </head> 
     <body> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-12"> 
         <div class="jumbotron"> 
          <div ng-app="someApp"> 
           <div ng-view></div> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </body> 
    </html> 

someCustomersView.html

<div> 
    <h2> 
     Hello, world! 
    </h2> 
    <p> 
     {{ desc }} 
    </p> 
    <p> 
     <a class="btn btn-primary btn-large" href="#">Learn more</a> 
    </p> 
    <input type="text" class="form-control" ng-model="someName"/> 
    <br> 
    <p>{{ someName | uppercase }}</p> 

    <ul ng-repeat="customer in customers"> 
     <li class="list-group-item">{{ customer | lowercase }}</li> 
    </ul> 
</div> 

someNameController.js

someApp.controller("someNameController", function($scope){ 
    $scope.customers = ["Customer2", "Customer3", "Customer4", "Customer5"] 
}) 

回答

1

我在config.js文件中聲明路由時犯了一個錯誤。 即使在將控制器的腳本包含在html中以及目錄之後,我仍然在分配路由時分配目錄。我在config.js這樣做:

someApp.config(["$routeProvider", function($routeProvider, $locationProvider){ 
    $routeProvider.when("/showSomeButtonsGroup", { 
     templateUrl : "views/view3.html", 
     controller : "controllers/page67Controller" 
    }) 
    .when("/", { 
     templateUrl : "views/someCustomersView.html", 
     controller : "someNameController" 
    }) 
}]) 

而不是做這樣的:

someApp.config(["$routeProvider", function($routeProvider, $locationProvider){ 
    $routeProvider.when("/showSomeButtonsGroup", { 
     templateUrl : "views/view3.html", 
     controller : "page67Controller" 
    }) 
    .when("/", { 
     templateUrl : "views/someCustomersView.html", 
     controller : "someNameController" 
    }) 
}])