0

I have tried partial view with <ng-view> directive I have used another controller in the partial view with controller script in the partial view file itself but it does not work it show error in console.

Below is the code

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>

The meta is not binded instead I am getting an error in 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

What am I doing wrong?

Here is the link to plunker

Improve this question
1
  • 1
    this is referred to as lazy loading. You cannot do it simply by including the script in your template. Look up "angular lazy loading"
    – Ronnie
    CommentedOct 17, 2016 at 20:46

1 Answer 1

Reset to default
1

Try adding your controllers to the initial page. I don't believe when the partial view is rendered the script tag will be executed in time for the controller to be instantiated with angular. Although I am not 100% certain on that. I don't believe it to be best practise having the controller in a script tag on a partial view.

Also having the angular app code in an external JavaScript file can make it easier to read and run things like minification.

Hope that helps.

Improve this answer
1
  • Thanks for your help. I have a doubt. If we put the script for the view which might not come into play(If user doesn't view that part) then don't you think the script file and its load is no use. That's why I was trying to put the script too in the same file so that only needed files are served to client and avoiding additional load.
    – rram
    CommentedOct 17, 2016 at 20:58

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.