I read tons regarding the problem with the ng-include scope, but none of them affect the simple thing I'm trying to do. Hope someone can clarify. This is a simplified version of what I'm trying to do, but encapsulates the problem.
Here is the main page
<!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>
and here 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"]}
});
</script>
</div>
How to create a variable for binding inside Menu.html... I can do it outside, but our engine will generate a menu when this file is requested.
source
share