部分視圖中的angularjs控制器腳本不起作用

Question

我嘗試使用<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

我究竟做錯了什么？

這是通向朋克的鏈接

Answer 1

嘗試將控制器添加到初始頁面。 我不相信在渲染局部視圖時，將及時執行script標簽，以便用角度實例化控制器。 盡管我對此不是100％肯定。 我認為將控制器放在局部視圖的script標簽中不是最佳實踐。

此外，在外部JavaScript文件中包含有角度的應用程序代碼可以使閱讀和運行縮小等操作變得更加容易。

希望能有所幫助。

部分視圖中的angularjs控制器腳本不起作用

問題描述

1 個解決方案

解決方案1
1 2016-10-17 20:47:30

部分視圖中的angularjs控制器腳本不起作用

問題描述

1 個解決方案

解決方案1 1 2016-10-17 20:47:30

解決方案1
1 2016-10-17 20:47:30