Aiuto nella programmazione, risposte alle domande / Javascript Lo script del controller / angularjs nella visualizzazione parziale non funziona: javascript, angularjs, ngroute

Lo script del controller angularjs nella vista parziale non funziona - javascript, angularjs, ngroute

Ho provato la visualizzazione parziale con <ng-view> direttiva Ho usato un altro controller nella vista parziale con lo script del controller nel file di visualizzazione parziale stesso ma non funziona mostra un errore nella console.

Di seguito è riportato il codice

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>

Il meta non è vincolato, invece ricevo un errore nella console.

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

Che cosa sto facendo di sbagliato?

Ecco il link a plunker

risposte:

1 per risposta № 1

Prova ad aggiungere i tuoi controller alla pagina iniziale. Non credo che quando viene visualizzata la vista parziale il tag di script verrà eseguito in tempo affinché il controller venga istanziato con angular. Anche se non ne sono sicuro al 100%. Non credo che sia una buona pratica avere il controller in un tag di script in una vista parziale.

Anche avere il codice dell'app angolare in un file JavaScript esterno può rendere più facile leggere ed eseguire cose come la minificazione.

Spero possa aiutare.