2015-12-09 132 views
4

我已经阅读吨有关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结合...我能做到这一点以外,但我们的引擎必应生成菜单时,该文件是请求..

+1

我认为'ngInclude'的一般用法是加载一个模板,最好是将模板与脚本分开。 –

回答

3

您面临的问题实际上并不是范围问题在这种情况下,而是如何你重新设置你的角度应用程序。通过将初始化并将控制器分配给包含在应用程序中的代码,当角度试图编译新包含的视图时,MenuController未定义,并且代码永远不会运行,实际上应该在控制台中引发错误。我会建议下列之一:

  1. 从模板中取出的角度脚本本身并设置它们在整个应用程序及其模块建立了自己的文件运行前进行初始化。

  2. 尽管我并不完全理解Engine生成菜单意味着什么 - 这听起来像是您试图使用模板语言来实际生成脚本标记之间的文字javascript,价值。如果是这样的话,我会建议不要这样做,并使用角度服务和提供商进行ajax调用来在内存中设置这些值。

  3. 如果您必须以这种方式构建您的应用程序,您必须查看延迟加载控制器与这样的库 - https://github.com/matys84pl/angularjs-requirejs-lazy-controllers。我没有使用它,但通过快速浏览自述文件​​,似乎它可能能够解决您的问题将维护您的应用程序的结构。

+0

如果我将控制器创建代码移到文件外部,如何在范围中设置数据以便绑定?我们正在使用一个自定义的Web引擎,这是有限的,当这个menu.html文件被请求时,服务器将生成数据..有没有办法在Menu.html中创建一个控制器?非常感谢回复! – Evan