2015-12-09 134 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