скрипт контроллера angularjs в частичном представлении не работает

#javascript #angularjs #ngroute

Вопрос:

Я пробовал частичный просмотр с <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=tabOneCtlamp;p1=not a function, got undefined

Что я делаю не так?

Вот ссылка на plunker

Ответ №1:

Попробуйте добавить свои контроллеры на начальную страницу. Я не верю, что при отображении частичного представления тег сценария будет выполнен вовремя, чтобы контроллер был создан с помощью angular. Хотя я не уверен в этом на 100%. Я не считаю, что лучше всего использовать контроллер в теге script в частичном представлении.

Кроме того, наличие кода приложения angular во внешнем файле JavaScript может упростить чтение и выполнение таких действий, как минимизация.

Надеюсь, это поможет.

1. Спасибо за вашу помощь. У меня есть сомнения. Если мы поместим скрипт для представления, который может не сработать (если пользователь не просматривает эту часть), то не думаете ли вы, что файл сценария и его загрузка бесполезны. Вот почему я пытался поместить скрипт в тот же файл, чтобы клиенту передавались только необходимые файлы и избежать дополнительной нагрузки.