Javascript NG包括范围_Javascript_Html_Angularjs

Javascript NG包括范围

javascript html angularjs

Javascript NG包括范围,javascript,html,angularjs,Javascript,Html,Angularjs,我已经读了很多关于ng包含范围问题的文章，但似乎没有一篇能够解决我试图做的简单事情。希望有人能澄清。这是我试图做的一个简化版本，但是封装了这个问题这是主页 <!DOCTYPE html> <html lang="en" ng-app="MyApp"> <head > <link href="css/bootstrap.min.css" rel="stylesheet"> <link href="css/simple-sid

我已经读了很多关于ng包含范围问题的文章，但似乎没有一篇能够解决我试图做的简单事情。希望有人能澄清。这是我试图做的一个简化版本，但是封装了这个问题

这是主页

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

内创建绑定变量。。。我可以在外面做这件事，但我们的引擎将在请求该文件时生成菜单

在本例中，您面临的问题实际上不是范围问题，而是如何设置angular应用程序。通过将初始化控制器并将其分配给应用程序的代码放入include中，当angular尝试编译新包含的视图时，MenuController是未定义的，代码将永远不会运行，实际上应该在控制台中抛出错误。我建议采取以下措施之一：

从模板中删除angular脚本，并将其设置在自己的文件中，整个应用程序及其模块将在运行前初始化

虽然我不完全理解引擎生成菜单是什么意思，但听起来您好像在尝试使用模板语言从排序视图模型的脚本标记之间实际生成文本javascript来设置值。如果是这种情况，我建议不要这样做，并使用angular服务和提供程序进行ajax调用以在内存中设置这些值

如果你必须以这种方式构建你的应用程序，你将不得不考虑用像这样的库延迟加载控制器。我没有使用过它，但通过快速浏览自述文件，它似乎可以解决您的问题，从而保持应用程序的结构

我认为

ngInclude

的一般用法是加载模板，最好将脚本与模板分开。如果我将控制器创建代码移到文件之外，如何在范围内设置数据以便绑定？我们使用的自定义web引擎有限，因此在请求此menu.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>