无法在 Phonegap Framework7 的新页面上调用 Angular 控制器答案

【问题标题】：Unable to call Angular Controller on a new page in Phonegap Framework7无法在 Phonegap Framework7 的新页面上调用 Angular 控制器
【发布时间】：2017-02-19 17:17:42
【问题描述】：

Angular 控制器在索引页面中工作正常，但是当我从链接页面调用它们时，它们不起作用。我需要对控制器做什么才能也能处理页面？

我的索引页面定义了应用程序。

<html ng-app="MyApp">

我已经链接了外部页面，例如：

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

在关于页面我有：

    <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>

我尝试了MyApp.angular.controller( 和MyApp.controller(，两者都不起作用。我还在索引和关于页面中包含了<script type="text/javascript" src="js/controller/MyAboutPageController.js"></script>，但没有帮助。

MyAboutPageController:

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

关于页面加载正常，但控制器没有。请帮忙。

【问题讨论】：

标签： angularjs cordova html-framework-7 angular-controller

【解决方案1】：

Angular 旨在帮助您创建 SPA（单页应用程序），这意味着您不必在页面之间导航（没有回发，没有新页面）。

我推荐你使用 ng-view 和 $routeProvider，所以是这样的：

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

然后在你的身体里：

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

在你的 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!!");
});

【讨论】：