CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-include
xtof
xtof

Reputation: 106

scope variable in my controller not working src of ng-include

I'm trying to load my ng-include dynamically by putting a $scope variable in the 'src' tag. Here's my code:

In controller:

app.controller('myController', function($scope) {
    $scope.requests = {
        "0": { url: '/tpl-first-request.html' },
        "1": { url: '/tpl-second-request.html' }
    };

    $scope.getRequest = getRequest;

    function getRequest(request) {
        $scope.request = $scope.requests[request].url;
    }
});

In html:

<body ng-controller="myController">
    <button ng-click="getRequest(0)">Click first one</button>
    <button ng-click="getRequest(1)">Click second one</button>
    <p ng-if="request">Request = {{request}}</p>
    <div ng-include src="request"></div>
</body>

The ng-include is not working, but the printout of "Request = {{request}}" is working fine.. You can test it in this Plunker

Upvotes: 0

Views: 124

Answers (2)

Jscti
Jscti

Reputation: 14440

It's a plunker problem, you're using absolute URLs for your templates instead of relatives ones:

  $scope.requests = {
    "0": { url: 'tpl-first-request.html' },
    "1": { url: 'tpl-second-request.html' }
  };

working plunker : http://plnkr.co/edit/iTZJ64YyyxqbQyC1bOKS?p=preview

Upvotes: 0

BAD_SEED
BAD_SEED

Reputation: 5056

Remove the slash from request path.

  $scope.requests = {
    "0": { url: 'tpl-first-request.html' },
    "1": { url: 'tpl-second-request.html' }
  };

This do the job, at least in my PLNKR.

Upvotes: 1

Related Questions