Eine JS-Variable zu einem AngularJS-Verzeichnis hinzufügen?

Question

Ich kann den folgenden Code zu bekommen scheint zu funktionieren:

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

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

ich die Variable ist das Problem, wie der folgende Code abgeleitet haben funktioniert:

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

Weiß jemand, wie kann ich mach das?

Update:

Steffen Link Folgen, habe ich den folgenden Code geschrieben, aber noch kein Glück:

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

Dank.

Answer 1

Basierend auf Steffens jsfiddle, hier ist, wie ich eine JavaScript-Variable AngularJS weitergegeben und verwendet es ein Verzeichnis bei der Definition:

<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! --> 

Vielen Dank an alle für ihre Antworten. :)

Answer 2

versuchen Sie dies:

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

In AngularJS, Umfang variable are access in HTML mit dem double curly brace notation {{ }}.

Answer 3

Versuchen Sie wie folgt vor:

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

Stellen Sie sicher, definieren $scope.topic = "whateveryouwant";

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

Man könnte es gerne tun:

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

Controller:

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