CODEWITHSUNDEEP
javascripthtmlangularjs
GRowing
GRowing

Reputation: 4717

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

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"
        }
    ]

Upvotes: 1

Views: 316

Answers (1)

musically_ut
musically_ut

Reputation: 34288

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

Upvotes: 1

Related Questions