Adding a JS Variable to a AngularJS Directory?

Question

I can't seem to get the following code to work:

<script>alert(topic);</script> <!-- Outputs: "dynamics" -->

<div ng-include="'content/' + topic + '.html'"></div> <!-- Does not work. -->

I have deduced the variable is the problem as the following code does work:

<div ng-include="'content/' + 'dynamics' + '.html'"></div> <!-- Works. -->

Does anybody know how I can do this?

Update:

Following Steffen's link, I have written the following code, but still no luck:

<script>
    alert(topic); // Outputs "dynamics"

    var app = angular.module('myapp', []);

    app.controller('MainCtrl', ['$scope', '$window', function ($scope, $window) {
        $scope.topic = $window.topic;
    }]);
</script>

<div ng-app="myapp" ng-controller="MainCtrl" ng-include="'content/' + 
    topic + '.html'"></div>  <!-- Does not work. -->

Thanks.

use this in html : <div ng-app="myapp" ng-controller="MainCtrl" ng-include="'content/{{topic}}.html'"></div> OR <div ng-app="myapp" ng-controller="MainCtrl" ng-include="'content/' + topic + '.html'"></div> — Pawan B
– Pawan B, Commented May 15, 2016 at 13:04
Try this: jsfiddle.net/ursujuge/1 You can see in the network console of your browser that it is trying to load dynamics.html — Steffen
– Steffen, Commented May 15, 2016 at 13:29

user6336941 · Accepted Answer · 2016-05-15 23:51:06Z

1

Based on Steffen's jsfiddle, here is how I passed a JavaScript variable to AngularJS and used it in defining a directory:

<script>
    // Create module.
    var app = angular.module('app', []);

    // Add controller to module.
    app.controller('MainCtrl', ['$scope', '$window', function ($scope, $window) {
        $scope.topic = $window.topic;
        console.log($scope.topic);
    }]);
</script>

<div ng-app="app" ng-controller="MainCtrl" ng-include="'content/' + 
    topic + '.html'"></div> <!-- Works! -->

Many thanks to all for their answers. :)

answered May 15, 2016 at 23:51

user6336941

398 bronze badges

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

Comments

Pawan B · Accepted Answer · 2016-05-15 12:52:10Z

0

try this :

<div ng-include="'content/{{topic}}.html'"></div>

In angularjs , scope variable are access in HTML using The double curly brace notation {{ }} .

edited May 15, 2016 at 12:52

answered May 15, 2016 at 12:21

Pawan B

4,6332 gold badges27 silver badges39 bronze badges

4 Comments

Pawan B Over a year ago

is topic defined in your controller ?? if not thn try $scope.topic = topic ; in your controller .

user6336941 Over a year ago

No, I am trying to work out how to do this now as I am new to AngularJS. I will post an update if I can't get it to work.

Pawan B Over a year ago

try $scope.topic = topic ; OR $scope.topic = $window.topic; in your controller .

Steffen Over a year ago

Correct curly braces syntax would be <a ng-href="content/{{topic}}.html"> but as far as I know ng-include requires a javascript expression as used in the code of the question. It is more likely that topic is not a scope variable as @p2. mentioned.

Wcan · Accepted Answer · 2016-05-15 13:11:36Z

0

Try as follows:

<ng-include src="topic"> </ng-include>

Make sure you have define $scope.topic = "whateveryouwant";

-----------OR-----------

You could do it like:

<ng-include src="getTopic()"></ng-include>

Controller:

function AppCtrl ($scope) {
  $scope.getTopic= function () {
      return 'partials/whatever.html';
  }
}

answered May 15, 2016 at 13:11

Wcan

8882 gold badges12 silver badges34 bronze badges

Collectives™ on Stack Overflow

Adding a JS Variable to a AngularJS Directory?

3 Answers 3

Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Linked

Related