I am trying to store templates in different html files and load them.
What I am trying to achieve is, when the dropdown is changed, I need to load the particular html file. But it is not even hitting the controller of the file i am loading. What am i doing wrong
Index.html
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="angular.min.js"></script>
<script src="Menu.js"></script>
<div ng-app="MenuApp">
<div ng-controller="MainMenu">
<div ng-include src="getView()"></div>
<select ng-model="Template" ng-change="ChangeTemplate()">
<option value="ListItems">ListItems</option>
<option value="BorderedItems">BorderedItems</option>
</select>
</div>
</div>
ListItems.html (sample template)
<div ng-app="Menu">
<div ng-controller="LoadMenu">
<ol ng-repeat="items in MenuItems">
<li>{{item}}</li>
</ol>
</div>
</div>
Menu.js
(function () {
angular
.module('MenuApp', [])
.controller('MainMenu', MainMenuControllerFunction)
.factory('LoadMenu',['$http',LoadingMenuItemsService]);
function MainMenuControllerFunction($scope, $http, $templateCache) {
$scope.Text = "Hello";
$scope.MenuItems = getMenuItems();
function getMenuItems() {
$http.get("https://gist.githubusercontent.com/vigneshvdm/dc8632bde4e010336356/raw/4fe500385f3249b8bc717d5022c50abb0e07ba75/news").then(function (response) {
$scope.MenuItems=response.data.array;
});
};
$scope.ChangeTemplate = function () {
var template = $templateCache.get('../Html/'+$scope.Template+'.html');
};
$scope.getView = function () {
return "ListItems.html";
};
};
function LoadingMenuItemsService() {
var MenuItems;
$http.get("https://gist.githubusercontent.com/vigneshvdm/dc8632bde4e010336356/raw/4fe500385f3249b8bc717d5022c50abb0e07ba75/news").then(function (response) {
MenuItems=response.data.array;
});
return MenuItems;
};
function ConsumeMenu() {
//$scope.MenuItems = MenuApp.LoadMenu;
alert("");
};
angular.module('Menu', ['MenuApp'])
.controller('LoadMenu', ConsumeMenu);
})();
ng-include="getView();", and are you sure you are giving the good relative path ingetView?