AngularJS與加載控制器的外部頁面

我有一個快速的問題，加載與路由的外部頁面。我很喜歡新的到AngularJS。AngularJS與加載控制器的外部頁面

var app = angular.module('app', []); 
$routeProvider.when('/list', { 
    templateUrl: '/list.html' 
})

加載頁面，但在list.html中有控制器定義。

list.html：

<script> 
app.controller('test', function(){ 
    console.log('test'); 
}); 
</script> 

<div ng-controller="test"> 

</div>

上面的代碼將引發我一個錯誤的測試是不確定的功能，除非如果我放在app.controller('test')父頁面。

所以我不能把控制器放在外部.html文件上？

下面

更新的鏈接： http://plnkr.co/edit/YC6P9W1VfzX8XOyrynCP?p=preview

來源

2014-03-31 Bruce

移動你的Ctrl鍵點擊時在主HTML頁面應加載定義爲單獨的js文件並在index.html中包含該js文件，那麼您將能夠將ctrl放在模板html – harishr

哇真的嗎？我會試試看，爲什麼？在此先感謝 – Bruce

讓我知道，如果這樣的作品，其他設置蹲刀顯示問題 – harishr

你必須創建一個單獨的script.js和主要頁面的執行過程中或鏈接

index.html 

    <!DOCTYPE html> 
    <html ng-app="app"> 
     <head> 
     <link rel="stylesheet" href="style.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script> 
     <script src="script.js"></script> 
     <script src="testscript.js"></script> 
     </head> 
     <body ng-controller="home"> 
     <h1>Hello Plunker! {{change}}</h1> 
     <a href="#/test" ng-click="test()" title="Click Test">Test</a> 
     <ng-view></ng-view> 
     </body> 
    </html> 

    testscript.js 

    function test2($scope){ 
      console.log('succeed'); 
    }; 

    script.js 

    // Code goes here 
    var app = angular.module('app', ['ngRoute']); 

    app.controller('home', function($scope){ 
     $scope.change = "change"; 

     $scope.test = function(){ 
     console.log('clicked'); 
     } 
    }); 

    app.config(function($routeProvider){ 
     $routeProvider.when('/test', { 
      templateUrl: 'test.html', 
      controller: function(){ 
      console.log('here'); 
      } 
     }) 
    });

來源

2014-05-17 11:10:59 user2094364

AngularJS與加載控制器的外部頁面

回答

相關問題