Ionic3中除home.html外其他页面控制器失效问题排查

你现在遇到的核心问题是在基于Angular 5的Ionic 3项目里，错误使用了AngularJS（Angular 1.x）的语法和开发模式——这两个是完全独立的框架，语法和运行机制差异极大，直接混用必然导致除首页外的控制器失效。

先拆解你代码里的错误点 #

1. index.html里的ng-app='myApp'：这是AngularJS的根模块声明，但Ionic 3是由Angular的NgModule管理应用启动的，这个属性完全多余且会和Angular的运行逻辑冲突。
2. contacts.html里的ng-controller和ng-bind：这两个都是AngularJS的指令，Angular 5根本不识别这些语法，自然无法加载对应的控制器逻辑。
3. 单独的script.js文件：你用AngularJS的方式定义模块和控制器，但Ionic 3的页面是Angular组件，逻辑应该写在对应页面的.ts文件里，这个外部JS文件和Angular的组件体系完全不兼容。首页的控制器能工作大概率是巧合或者残留代码的偶然生效，本质也是错误用法。

正确的实现步骤（针对你的代码修改） #

1. 修正index.html，移除AngularJS相关代码

删掉ng-app属性和自定义的script.js引用，因为Angular会自动打包所有组件逻辑到main.js里：

<body>
 <ion-app></ion-app>
 <!-- The polyfills js is generated during the build process -->
 <script src="build/polyfills.js"></script>
 <!-- The vendor js is generated during the build process It contains all of the dependencies in node_modules -->
 <script src="build/vendor.js"></script>
 <!-- The main bundle js is generated during the build process -->
 <script src="build/main.js"></script>
</body>

2. 用Angular组件的方式重写Contact页面逻辑

在contact.ts（你的ContactPage对应的TypeScript文件）里编写页面逻辑，替代AngularJS的控制器：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-contact',
  templateUrl: 'contact.html'
})
export class ContactPage {
  text: string; // 用组件属性替代AngularJS的$scope

  constructor(public navCtrl: NavController) {
    this.text = 'ctrl 2'; // 初始化属性值
  }
}

3. 修正contacts.html，使用Angular的插值语法

移除ng-controller和ng-bind，改用Angular的{{}}插值绑定属性：

<ion-content padding>
  Contacts
  <p>{{ text }}</p>
</ion-content>

4. 同步修正Home页面（统一Angular写法）

把Home页面的逻辑也移到home.ts里，避免继续混用AngularJS：

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  text: string;

  constructor(public navCtrl: NavController) {
    this.text = 'ctrl 2';
  }
}

对应的home.html改成：

<ion-content padding>
  <p>{{ text }}</p>
</ion-content>

5. 确认app.module.ts配置正确

你当前的app.module.ts已经把ContactPage、HomePage等声明在了declarations和entryComponents里，这部分是正确的，确保文件路径无误即可。

最后提醒 #

Ionic 3是基于Angular（2+）的框架，和AngularJS（1.x）是两代完全不同的技术，绝对不能混用语法。你之前的写法相当于在Vue项目里写jQuery逻辑，自然会出现各种兼容性问题。按照上面的步骤修改后，就能完全适配Ionic 3的Angular开发模式，所有页面的逻辑都能正常运行了。

内容的提问来源于stack exchange，提问作者Anita