Angular Direktive templateUrl relativ zur .js-Datei

Ich baue eine Winkelrichtlinie, die an verschiedenen Orten verwendet wird. Ich kann die Dateistruktur der App, in der die Direktive verwendet wird, nicht immer garantieren, aber ich kann den Benutzer zwingen, das directive.jsund directive.html(nicht die tatsächlichen Dateinamen) in denselben Ordner zu legen .

Wenn die Seite das auswertet directive.js, betrachtet sie das templateUrlals relativ zu sich selbst. Ist es möglich, das templateUrlrelativ zur directive.jsDatei festzulegen?

Oder wird empfohlen, die Vorlage einfach in die Direktive selbst aufzunehmen.

Ich denke, ich möchte möglicherweise unterschiedliche Vorlagen basierend auf unterschiedlichen Umständen laden. Daher würde ich es vorziehen, einen relativen Pfad zu verwenden, anstatt den zu aktualisieren directive.js

Die aktuell ausgeführte Skriptdatei ist immer die letzte im Skriptarray, sodass Sie den Pfad leicht finden können:

// directive.js

var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length-1].src;

angular.module('app', [])
    .directive('test', function () {
        return {
            templateUrl: currentScriptPath.replace('directive.js', 'directive.html')
        };
    });

Wenn Sie sich nicht sicher sind, wie der Skriptname lautet (z. B. wenn Sie mehrere Skripte in eines packen), verwenden Sie Folgendes:

return {
    templateUrl: currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1) 
        + 'directive.html'
};

Hinweis : In Fällen, in denen ein Abschluss verwendet wird, sollte sich Ihr Code außerhalb befinden, um sicherzustellen, dass das aktuelle Skript zum richtigen Zeitpunkt ausgewertet wird, z.

// directive.js

(function(currentScriptPath){
    angular.module('app', [])
        .directive('test', function () {
            return {
                templateUrl: currentScriptPath.replace('directive.js', 'directive.html')
        };
    });
})(
    (function () {
        var scripts = document.getElementsByTagName("script");
        var currentScriptPath = scripts[scripts.length - 1].src;
        return currentScriptPath;
    })()
);

Wie Sie sagten, wollten Sie den Direktiven zu unterschiedlichen Zeiten unterschiedliche Vorlagen zur Verfügung stellen. Warum nicht zulassen, dass die Vorlage selbst als Attribut an die Direktive übergeben wird?

<div my-directive my-template="template"></div>

Verwenden Sie dann so etwas wie $compile(template)(scope)innerhalb der Richtlinie.

Zusätzlich zu der Antwort von Alon Gubkin würde ich vorschlagen, eine Konstante mithilfe eines sofort aufgerufenen Funktionsausdrucks zu definieren, um den Pfad des Skripts zu speichern und in die Direktive einzufügen:

angular.module('app', [])

.constant('SCRIPT_URL', (function () {
    var scripts = document.getElementsByTagName("script");
    var scriptPath = scripts[scripts.length - 1].src;
    return scriptPath.substring(0, scriptPath.lastIndexOf('/') + 1)
})())

.directive('test', function(SCRIPT_URL) {
    return {
        restrict :    'A',
        templateUrl : SCRIPT_URL + 'directive.html'
    }
});

Dieser Code befindet sich in einer Datei namens route.js

Folgendes hat bei mir nicht funktioniert:

var scripts = document.getElementsByTagName("script")
var currentScriptPath = scripts[scripts.length-1].src;
var baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);

Folgendes tat:

var bu2 = document.querySelector("script[src$='routes.js']");
currentScriptPath = bu2.src;
baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);

Mein Test basiert auf dem folgenden Blog über die Verwendung von Angle Load Load Angular: http://ify.io/lazy-loading-in-angularjs/

require.js erzeugt einen requireConfig-Bootstrap

requireConfig erzeugt eine eckige app.js.

eckige app.js erzeugt meine route.js

Ich hatte den gleichen Code, der von einem Revel-Webframework und asp.net mvc bereitgestellt wurde. In schwelgen document.getElementsByTagName ("script") wurde ein Pfad zu meiner erforderlichen Bootstrap-JS-Datei und NICHT zu meiner Routen.js erstellt. In ASP.NET MVC wurde ein Pfad zum injizierten Browser Link-Skriptelement von Visual Studio erstellt, das während der Debugging-Sitzungen dort abgelegt wird.

Dies ist mein Arbeitsrouten.js Code:

define([], function()
{
    var scripts = document.getElementsByTagName("script");
    var currentScriptPath = scripts[scripts.length-1].src;
    console.log("currentScriptPath:"+currentScriptPath);
    var baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);
    console.log("baseUrl:"+baseUrl);
    var bu2 = document.querySelector("script[src$='routes.js']");
    currentScriptPath = bu2.src;
    console.log("bu2:"+bu2);
    console.log("src:"+bu2.src);
    baseUrl = currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1);
    console.log("baseUrl:"+baseUrl);
    return {
        defaultRoutePath: '/',
            routes: {
            '/': {
                templateUrl: baseUrl + 'views/home.html',
                dependencies: [
                    'controllers/HomeViewController',
                    'directives/app-style'
                ]
            },
            '/about/:person': {
                templateUrl: baseUrl + 'views/about.html',
                dependencies: [
                    'controllers/AboutViewController',
                    'directives/app-color'
                ]
            },
            '/contact': {
                templateUrl: baseUrl + 'views/contact.html',
                dependencies: [
                    'controllers/ContactViewController',
                    'directives/app-color',
                    'directives/app-style'
                ]
            }
        }
    };
});

Dies ist meine Konsolenausgabe, wenn ich von Revel aus laufe.

currentScriptPath:http://localhost:9000/public/ngApps/1/requireBootstrap.js routes.js:8
baseUrl:http://localhost:9000/public/ngApps/1/ routes.js:10
bu2:[object HTMLScriptElement] routes.js:13
src:http://localhost:9000/public/ngApps/1/routes.js routes.js:14
baseUrl:http://localhost:9000/public/ngApps/1/ 

Eine andere nette Sache, die ich getan habe, ist, die erforderliche Konfiguration zu nutzen und einige benutzerdefinierte Konfigurationen darin zu platzieren. dh hinzufügen

customConfig: { baseRouteUrl: '/AngularLazyBaseLine/Home/Content' } 

Sie können es dann erhalten, indem Sie den folgenden Code innerhalb von route.js verwenden

var requireConfig = requirejs.s.contexts._.config;
console.log('requireConfig.customConfig.baseRouteUrl:' + requireConfig.customConfig.baseRouteUrl); 

Manchmal müssen Sie eine Baseurl im Voraus definieren, manchmal müssen Sie sie dynamisch generieren. Ihre Wahl für Ihre Situation.

Einige mögen es als etwas "hackig" bezeichnen, aber ich denke, bis es nur noch einen Weg gibt, wird alles hackig sein.
Ich hatte viel Glück damit:

angular.module('ui.bootstrap', [])
  .provider('$appUrl', function(){
    this.route = function(url){
       var stack = new Error('dummy').stack.match(new RegExp(/(http(s)*\:\/\/)[^\:]+/igm));
       var app_path = stack[1];
       app_path = app_path.slice(0, app_path.lastIndexOf('App/') + 'App/'.length);
         return app_path + url;
    }
    this.$get = function(){
        return this.route;
    } 
  });

Wenn Sie dann den Code in einer Anwendung verwenden, nachdem Sie das Modul in die App aufgenommen haben.
In einer App-Konfigurationsfunktion:

.config(['$routeProvider', '$appUrlProvider', function ($routeProvider, $appUrlProvider) {

    $routeProvider
        .when('/path:folder_path*', {
            controller: 'BrowseFolderCntrl',
            templateUrl: $appUrlProvider.route('views/browse-folder.html')
        });
}]);

Und in einem App-Controller (falls erforderlich):

var MyCntrl = function ($scope, $appUrl) {
    $scope.templateUrl = $appUrl('views/my-angular-view.html');
};

Es verursacht einen neuen Javascript-Fehler und zieht den Stack-Trace heraus. Anschließend werden alle URLs analysiert (mit Ausnahme der anrufenden Leitung / Char-Nummer).
Sie können dann einfach die erste Datei im Array herausziehen, die die aktuelle Datei ist, in der der Code ausgeführt wird.

Dies ist auch hilfreich, wenn Sie den Code zentralisieren und dann die zweite ( [1]) im Array herausziehen möchten , um den Speicherort der aufrufenden Datei abzurufen

Wie mehrere Benutzer bereits betont haben, sind relevante Pfade beim Erstellen der statischen Dateien nicht hilfreich, und ich würde dies wärmstens empfehlen.

In Angular gibt es eine raffinierte Funktion namens $ templateCache , mit der Vorlagendateien mehr oder weniger zwischengespeichert werden. Wenn Angular das nächste Mal eine benötigt, wird anstelle einer tatsächlichen Anforderung die zwischengespeicherte Version bereitgestellt. Dies ist eine typische Verwendung:

module = angular.module('myModule');
module.run(['$templateCache', function($templateCache) {
$templateCache.put('as/specified/in/templateurl/file.html',
    '<div>blabla</div>');
}]);
})();

Auf diese Weise lösen Sie beide das Problem der relativen URLs und gewinnen an Leistung.

Natürlich lieben wir die Idee, separate HTML-Vorlagen-Dateien zu haben (im Gegensatz zum Reagieren), daher ist das oben Genannte allein nicht gut. Hier kommt das Build-System, das alle HTML-Vorlagen-Dateien lesen und ein js wie das oben genannte erstellen kann.

Es gibt mehrere html2js-Module für Grunzen, Schlucken, Webpack, und dies ist die Hauptidee dahinter. Ich persönlich benutze gulp sehr oft, deshalb mag ich gulp-ng-html2js besonders, weil es genau das sehr einfach macht.