2016-10-17 4 views
0

<ng-view>ディレクティブで部分ビューを試しましたパーシャルビューファイル自体にコントローラスクリプトを使用して別のコントローラを使用しましたが、コンソールでエラーが表示されません。angularjsコントローラスクリプトが部分的に表示されない

は、以下のコード

index.htmlを

<!DOCTYPE html> 
<html> 

    <head> 
    <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
    <script data-require="[email protected]" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script> 
    <script data-require="[email protected]" 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 

私は間違っていますか?ここで

は、最初のページにあなたのコントローラを追加するplunker

+1

これはレイジーローディングと呼ばれます。テンプレートにスクリプトを含めるだけでは簡単にはできません。 "角度のある怠惰な読み込み"を参照してください – Ronnie

答えて

1

しようとするリンクです。私は部分的なビューがレンダリングされたときにスクリプトタグが時間通りに実行され、コントローラーが角度でインスタンス化されるとは信じません。私はそれについて100%確信していませんが。私はそれが部分的なビューでスクリプトタグのコントローラを持つベストプラクティスであるとは思わない。

また、外部のJavaScriptファイルに角度のあるアプリケーションコードを使用すると、小型化などの読み込みと実行が簡単になります。

希望に役立ちます。

+0

あなたの助けをありがとう。私は疑問を持っています。再生しない可能性のあるビュー用のスクリプトを置くと(ユーザーがその部分を表示しない場合)、スクリプトファイルとその負荷は役に立たないと思わないでください。そのため、スクリプトを同じファイルに入れて、必要なファイルだけがクライアントに提供され、追加の負荷がかからないようにしました。 – rram

関連する問題