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与加载控制器的外部页面

回答

相关问题