javascript - 部分 View 中的 angularjs Controller 脚本不起作用

标签 javascript angularjs ngroute

我尝试使用 <ng-view> 进行部分 View 指令我在部分 View 中使用了另一个 Controller ,并在部分 View 文件本身中使用了 Controller 脚本,但它不起作用,它在控制台中显示错误。

下面是代码

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>

元未绑定(bind),而是我在控制台中收到错误。

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

我做错了什么?

这里是plunker的链接

最佳答案

尝试将 Controller 添加到初始页面。我不相信当渲染部分 View 时,脚本标记会及时执行,以便用 Angular 实例化 Controller 。虽然我对此不是100%确定。我不认为将 Controller 放在部分 View 的脚本标记中是最佳实践。

此外,将 Angular 应用程序代码放在外部 JavaScript 文件中可以使阅读和运行缩小等操作变得更容易。

希望有帮助。

关于javascript - 部分 View 中的 angularjs Controller 脚本不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40095033/

相关文章:

jquery - 在 JQuery/Angular JS 中通过拖放创建嵌套条件

ruby-on-rails - Angular + Rails 应用程序无法在 heroku 上运行 - 无法实例化模块

javascript - Angular 动画 View 转换取决于起点和终点

javascript - 页面重新加载时 ngRoute 不起作用

javascript - 使用 Javascript 读取外部文件

javascript - JavaScript 中的浏览器事件是异步的吗?

javascript - ECDH 与不同长度的公钥进行 key 交换?

javascript - 如何从 UserFrosting Controller 正确返回 .xls Excel 文件并在 Angular 2+ 中处理它?

javascript - AngularJS Linky过滤器停止传播

angularjs - 在 ui-router 解析期间应用加载微调器