Ajuda na programação, respostas a perguntas / Javascript O script do controlador / angularjs em visualização parcial não está funcionando - javascript, angularjs, ngroute

O script do controlador angularjs na visão parcial não está funcionando - javascript, angularjs, ngroute

Eu tentei visão parcial com <ng-view> Eu usei outro controlador na visualização parcial com o script do controlador no próprio arquivo de visualização parcial, mas não funciona, mostra erro no console.

Abaixo está o código

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>

O meta não está vinculado, em vez disso, estou recebendo um erro no 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

O que estou fazendo de errado?

Aqui está o link para plunker

Respostas:

1 para resposta № 1

Tente adicionar seus controladores à página inicial.Não acredito que quando a visualização parcial for renderizada, a tag do script será executada a tempo de o controlador ser instanciado com angular. Embora não esteja 100% certo disso. Não acredito que seja a melhor prática ter o controlador em uma tag de script em uma visualização parcial.

Além disso, ter o código do aplicativo angular em um arquivo JavaScript externo pode facilitar a leitura e a execução de coisas como a minificação.

Espero que ajude.