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