带控制器加载外部页面的AngularJS
带控制器加载外部页面的AngularJS
提问于 2014-03-30 21:19:50
我有一个快速的问题，关于加载外部页面的路由。我对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>上面的代码会抛出一个错误，因为test是未定义的函数，除非我将app.controller('test')放置到父页面。
所以我不能把控制器放在外部的.html文件上？
回答 1
Stack Overflow用户
发布于 2014-05-17 03:10:59
您必须创建一个单独的script.js，并在执行主页或单击链接时加载主html页面。
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');
}
})
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22754114
复制
相似问题
使用angularjs在分隔页中加载外部库
AngularJS & Bootstrap模式加载模板外部控制器
在angularjs中重新加载外部控制器
AngularJS控制器工作，但不加载html页。
angularjs控制器模块参考加载空白页
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
