CODEWITHSUNDEEP
javascripthtmlangularjs
tajger
tajger

Reputation: 1

AngularJS: How to load javascript files into the partials using ng-include

My main javascript files (they are in index.html) don't want to work in the partials (page1.html, etc.).For example jquery, hightlight syntax. The problem is with loading them during I click on my menu.

HTML CODE:

<div data-ng-controller="TestCtrl">
<ul>
    <li data-ng-repeat="page in pages"><a href="" data-ng-click="loadPage(page)">{{page.title}}</a></li>
</ul>
<article data-ng-include="view"></article>

JS CODE

app.controller('TestCtrl', ['$scope', function($scope){
$scope.pages =
    [
        {
            title: 'Test',
            url: 'page1.html'
        },
        {
            title: 'Test2',
            url: 'page2.html'
        },
        {
            title: 'Test3',
            url: 'page3.html'
        }
    ];
$scope.view = $scope.pages[0].url;
$scope.loadPage = function($page){
    $page.url ?  $scope.view = $page.url : '';
};

The content is loaded when I click in certain link (page1.html, page2.html, page3.html). But script dont want to work. What is the problem here?

Upvotes: 0

Views: 338

Answers (1)

Morteza Ziyaeimehr
Morteza Ziyaeimehr

Reputation: 2117

You mean the script in index.html not works in loaded partials?

So i think it's related to that scripts. You should initialize those scripts again after loading template file.

Most of jquery plugins have plugin initializer function, Just run it again. e.g $('.codeblock').highliter();

Upvotes: 0

Related Questions