0

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);


})();
3
  • 1
    I would do ng-include="getView();", and are you sure you are giving the good relative path in getView ? Commented Jan 18, 2016 at 12:04
  • yeah. Is it not possible to have a controller/module in the template file? Commented Jan 18, 2016 at 12:52
  • plnkr.co/edit/aVSBI4RxwoR0l4opHeqL?p=preview @PierreEmmanuelLallemant check this link. The first option is not loading the items Commented Jan 18, 2016 at 12:53

2 Answers 2

2

Do not use functions in templates when you can avoid this.

<select ng-model="template">
  <option value="test.html">first</option>
  <option value="test2.html">second</option>
</select>
<div ng-include="template"></div>

http://plnkr.co/edit/osB9UiSzvF4IoqkizcOP?p=preview

Sign up to request clarification or add additional context in comments.

1 Comment

Thank Petr. I am trying to have a controller,module in the template files as well. plnkr.co/edit/aVSBI4RxwoR0l4opHeqL?p=preview check this
1

I think you should use angularjs directives in this case. By using them you could store templates in different html files.

1 Comment

do you have any fiddle/plunkr links?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.