在视图中显示 AngularJS 内容答案

【问题标题】：Displaying AngularJS content within Views在视图中显示 AngularJS 内容
【发布时间】：2016-11-21 07:14:02
【问题描述】：

当我将以下静态 HTML 与视图一起使用时，一切都按我的预期工作，如下所示： https://embed.plnkr.co/MJYSP01mz5hMZHlNo2HC/

现在我要问的是，我如何正确地让这个 angular-ui 手风琴在 ng-view 中正常工作？

在这里查看我要使用的手风琴：

http://plnkr.co/edit/1ZWBsbO6sQRnZ7CpPrdz?p=info

我的测试插件在这里，显示 HTML 显示在视图中，但它缺少 JS 功能： https://plnkr.co/edit/I3myvfH5KUkpfV1aWh72?p=info

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angularjs@1.5.7" data-semver="1.5.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
    <script data-require="angular-route@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular-route.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  </head>

<body ng-app="Test">

    <div ng-include='"header.html"'></div>
    <div ng-view></div>
    <div ng-include='"footer.html"'></div>

</body>

</html>

【问题讨论】：

你有明显的问题。你在控制台检查错误了吗？
我确实看到我有 24 个控制台错误，这让我难以解决问题
这是我原来的 plunk，现在没有控制台错误：plnkr.co/edit/W0PVu0CSIH3ymnzt6Iol?p=preview 然后手风琴没有控制台错误：plnkr.co/edit/W0PVu0CSIH3ymnzt6Iol?p=preview 我想我只需要帮助理解，或者弄清楚如何把手风琴进入ng-view，如果这有意义吗？感谢您的宝贵时间！

标签： javascript angularjs ng-view angularjs-ng-include ng-app

【解决方案1】：

您必须使用您定义的名称（PageCtrl）定义一个controller。

app.controller('PageCtrl', [function(){  
 // Your business logic
 alert("In am controller"); 
 }])

【讨论】：

我要为页面控制器添加一些特定的东西吗？在这里查看我的 plunk 更新plnkr.co/edit/I3myvfH5KUkpfV1aWh72?p=info
@Abuborey：是的，你做到了。来自 doc :: Controller fn，它应该与新创建的范围或注册控制器的名称（如果作为字符串传递）相关联。