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.

http://stackoverflow.com/questions/19383725/how-to-access-global-js-variable-in-angularjs-directive — Steffen, May 15 '16 at 12:22
Try this: https://jsfiddle.net/ursujuge/1/ You can see in the network console of your browser that it is trying to load dynamics.html — Steffen, May 15 '16 at 13:29
To give a bit of an explanation. The value of most angular directives (like ng-include) is evaluated as javascript in context of $scope. That is why your variable has to be declared in the current $scope. Double curly braces will lead to an error because it is not valid js syntax. Other directives like ng-href allow a string based syntax like `` which often leads to confusion. — Steffen, May 15 '16 at 13:41
Thank you so much @Steffen , after a good nights sleep I have got it to work. This has really opened my eyes to how AngularJS works as well. Thanks again. — user6336941, May 15 '16 at 23:35

score 1 · Accepted Answer · answered May 15 '16 at 23:51

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. :)

bob · Answer 2 · 2016-05-15T12:52:10.927

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 '16 at 12:52

answered May 15 '16 at 12:21

bob

4,595
2
25
35

is topic defined in your controller ?? if not thn try `$scope.topic = topic ;` in your controller . – bob May 15 '16 at 12:46
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. – user6336941 May 15 '16 at 12:48
try `$scope.topic = topic ;` OR `$scope.topic = $window.topic;` in your controller . – bob May 15 '16 at 12:49
Correct curly braces syntax would be `` 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. – Steffen May 15 '16 at 12:51

score 0 · Answer 3 · answered May 15 '16 at 13:11

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

Adding a JS Variable to a AngularJS Directory?

3 Answers3