Angularjs - ng-include not loading the include template (no visible errors)

Question

I am trying to include various html templates into a single div on the page when clicking on corresponding links (I am open to better ideas that would allow me to style links as icons)..

I am not sure why ng-include is not doing anything

Html file

    <div ng-controller="loadCtrl">

        <div>
            <ul>
                <li ng-repeat="block in blocks">

                    <a href="#" ng-model="block">
                        {{block.name}} - {{block.ctrl}}
                    </a>

                </li>
            </ul>
        </div>

        <div ng-include="block.ctrl"></div> 

    </div>

js controller

    app.controller('loadCtrl', function ($scope, $http) {

        $scope.pyctrl = base_data + 'blocks.json';
        $scope.blocks = [];

        $scope.LoadBlocks = function(data, status){
            $scope.blocks = data;
        }

        $scope.fetch = function(){
            $http.get($scope.pyctrl).success($scope.LoadBlocks,console.log("Ok"));
        }

        $scope.fetch();

    });

json file

    [
        {
            "name": "block 1",
            "ctrl": "dir1/dir2/template1.html"
        },
        {
            "name": "block 2",
            "ctrl": "dir1/dir2/template2.html"
        },
        {
            "name": "block 3",
            "ctrl": "dir1/dir2/template3.html"
        }
    ]

musically_ut · Accepted Answer · 2013-11-22 06:49:49Z

1

I think you wanted to keep the ng-include inside the ng-repeat loop (the li element).

Update: If you want to save a value in block when you click on a link, then instead of using ng-model="block", use ng-click="selectedBlock(block") to call a function on the scope which does this.

    $scope.block = null;
    $scope.selectBlock = function(block){
        $scope.block = block;
    }

edited Nov 22, 2013 at 6:49

answered Nov 21, 2013 at 22:39

musically_ut

34.3k9 gold badges98 silver badges110 bronze badges

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

4 Comments

GRowing Over a year ago

I don't want that. That loads all my templates automatically. I am trying to adapt angular documentation example from here docs.angularjs.org/api/ng.directive:ngInclude just by changing option list to links

GRowing Over a year ago

How can I verify that ng-click event is firing.. because nothing is happening when I click in any shape or form?

GRowing Over a year ago

No matter how I spin this I can't seem to get it to work. If selected block is outside the loop I can't save it. I really don't want to be a pain, but could you maybe help me with the function on the scope? I am not understanding the ng-click I guess. If I have to use the ng-repeat in a separate div (in which I am loading templates) how could I filter by selected link only?

musically_ut Over a year ago

@PersistentNewbie The problem was that selectedBlock was being created in the ng-repeat's scope and was not accessible outside. Updated the answer to use a function on the controller to do it instead.

Collectives™ on Stack Overflow

Angularjs - ng-include not loading the include template (no visible errors)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related