Question

我已经阅读了关于ng-include范围问题的数据，但似乎没有解决我试图做的简单事情。希望有人能澄清一下。这是我试图做的简化版本，但是封装了这个问题。

这是主页

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head >
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/simple-sidebar.css" rel="stylesheet">
</head>
   <body>
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/angular.min.js"></script>
        <script>
            var app = angular.module('MyApp', []);
        </script>
        <div ng-include="'/Menu.html'" ></div>
    </body>

</html>

这里是Menu.html

    <div id="sidebar-wrapper" ng-app="MyApp" ng-controller="MenuController">
    <ul class="sidebar-nav">
        <li class="sidebar-brand">
            <a href="#">
                Header
            </a>
        </li>
        <li>
            <a href="\Login.html">Sign In</a>
        </li>
        <li ng-repeat="menuItem in MainMenu.Labels">
            <a href="#">{{menuItem}}</a>
        </li>
    </ul>
    <script>

        app.controller('MenuController', function($scope) {
            $scope.MainMenu = {"Labels":["Status","Setup"]} // this code never executes
        });
    </script>
</div>

如何在menu.html内创建绑定变量...我可以在外面执行此操作，但我们的引擎会在请求该文件时生成菜单..

Answer 1

在这种情况下，您面临的问题实际上并不是范围问题，而是您如何设置角度应用。通过将初始化并将控制器分配给include中的应用程序的代码，当angular尝试编译新包含的视图时，MenuController是未定义的，并且代码将永远不会运行，实际上应该在控制台中抛出错误。我会推荐以下其中一项：

从模板中删除角度脚本，并将它们设置在自己的文件中，整个应用程序及其模块设置为在运行时初始化。
虽然我不完全理解Engine生成菜单的意思 - 听起来你正在尝试使用模板语言从视图模型中的脚本标记之间实际生成文字javascript排序以设置值。如果是这种情况，我建议不要这样做并使用角度服务和$http提供程序进行ajax调用以在内存中设置这些值。
如果你必须以这种方式构建你的应用程序，你将不得不考虑延迟加载控制器与这样的库 - https://github.com/matys84pl/angularjs-requirejs-lazy-controllers。我没有使用它，但通过快速浏览自述文件，它似乎可以解决您的问题将维持您的应用程序的结构。

NG包括范围

1 个答案: