CODEWITHSUNDEEP
angularjscordovahtml-framework-7angular-controller
Somename
Somename

Reputation: 3434

Unable to call Angular Controller on a new page in Phonegap Framework7

The Angular controllers work fine in the index page, but when I call them from a linked page, they don't work. What do I need to do with the controllers to be able to work with pages too?

My index page has the app defined.

<html ng-app="MyApp">

I've linked the external page like: 

Click <a href="about.html">here</a> to go to About

On About Page I have: 

    <script type="text/javascript" src="js/controller/MyAboutPageController.js"></script>
<div class="navbar">
    <div class="navbar-inner">
        <div class="left">
            <a href="#" class="back link">
                <i class="icon icon-back"></i>
                <span>Back</span>
            </a>
        </div>
        <div class="center sliding">About</div>
        <div class="right">
            <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
        </div>
    </div>
</div>
<div class="pages">
    <div data-page="about" class="page">
        <div class="page-content">
            <div class="content-block" ng-controller="MyAboutPageController">
                <p>Here is About page!</p>
                {{name}}
             </div>
        </div>
    </div>
</div>

I tried with MyApp.angular.controller( and MyApp.controller(, both dont work. Also I included <script type="text/javascript" src="js/controller/MyAboutPageController.js"></script> in index and About page and doesnt help.

MyAboutPageController:

 MyApp.angular.controller("MyAboutPageController", function($scope){
    $scope.name = "John Wick Test";
    console.log("MyAboutPageController loaded fine!!");
});

The About page loads fine but the controller dont. Please help.

Upvotes: 1

Views: 148

Answers (1)

Victor Hugo Terceros
Victor Hugo Terceros

Reputation: 3169

Angular was designed to help you creating SPA (Single Page Applications), that means that you do not have to navigate between pages (no postbacks, no new pages).

I recommend you to use ng-view and $routeProvider, so something like this:

<head>    
...
<script src="scripts/app/index.js"></script>
</head>

then in your body:

<body ng-app="YourApp">
...
Click <a href="#!about">here</a> to go to About
<div ng-view></div>

in your index.js:

app.config(function ($routeProvider) {
$routeProvider
    .when('about', {
        templateUrl: 'Views/about.html',
        controller: 'AboutController'
    })
...
app.controller("AboutController", function($scope){
$scope.name = "John Wick Test";
console.log("MyAboutPageController loaded fine!!");
});

Upvotes: 0

Related Questions