[英]angularjs controller script in partial view is not working
我尝试使用<ng-view>
指令进行局部视图操作我在局部视图文件中使用带有控制器脚本的局部视图中的另一个控制器,但它不起作用,它在控制台中显示错误。
下面是代码
index.html
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<script data-require="angular-route@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script>
var testApp = angular.module("testApp", ["ngRoute"]).config(function ($routeProvider) {
$routeProvider.when("/table", {
templateUrl: "tab1.html"
});
$routeProvider.when("/tab2", {
templateUrl: "tab2.html"
});
$routeProvider.when("/tab3", {
templateUrl: "tab3.html"
});
$routeProvider.when("/tab4", {
templateUrl: "tab4.html"
});
$routeProvider.otherwise({
templateUrl: "tab1.html"
});
});
testApp.controller('testCtl',function($scope,$location){
$scope.check = function(selectedView){
return selectedView == $location.path();
}
});
</script>
</head>
<body ng-app="testApp" ng-controller="testCtl">
<ul class="nav nav-tabs" style="margin-bottom: 15px;">
<li role="presentation" ng-class="{ active: check('/tab1')}"><a href="#/tab1">Tab ONE</a></li>
<li role="presentation" ng-class="{ active: check('/tab2')}"><a href="#/tab2">Tab TWO</a></li>
<li role="presentation" ng-class="{ active: check('/tab3')}"><a href="#/tab3">Tab THREE</a></li>
<li role="presentation" ng-class="{ active: check('/tab4')}"><a href="#/tab4">Tab FOUR</a></li>
</ul>
<ng-view>
</body>
</html>
tab1.html
<script>
angular.module("testApp").controller('tabOneCtl',function($scope){
$scope.meta = "something";
});
</script>
<div ng-controller="tabOneCtl">
This is tab one and this tab has meta values which are shown below
{{meta}}
</div>
元未绑定,而是控制台出现错误。
Error: [ng:areq] Argument 'tabOneCtl' is not a function,
got undefinedhttp://errors.angularjs.org/1.5.8/ng/
areq?p0=tabOneCtl&p1=not%20a%20function%2C%20got%20undefined
我究竟做错了什么?
这是通向朋克的链接
尝试将控制器添加到初始页面。 我不相信在渲染局部视图时,将及时执行script标签,以便用角度实例化控制器。 尽管我对此不是100%肯定。 我认为将控制器放在局部视图的script标签中不是最佳实践。
此外,在外部JavaScript文件中包含有角度的应用程序代码可以使阅读和运行缩小等操作变得更加容易。
希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.