CODEWITHSUNDEEP
angularjsasp.net-mvc
Monojit Sarkar
Monojit Sarkar

Reputation: 2451

How to mention angular custom directive templateUrl path when working with Asp.net MVC

i have a sample directive where i need to mention templateUrl file location. my template file exist in this location Views/Home/searchableMultiselect.html

app.directive("showdata", function ($timeout) {
    return {
        templateUrl: '~/Views/Home/searchableMultiselect.html',
        restrict: 'AE',

the above code is in app.js file. now tell me how to instruct angular to load template file from this location '~/Views/Home/searchableMultiselect.html'

thanks

Upvotes: 1

Views: 781

Answers (2)

Shyju
Shyju

Reputation: 218792

Since it is an asp.net mvc app, you should take advantage of helper methods like Url.Action or Url.Content or Url.RouteUrl. In your razor view you may use either of these methods to generate the path to your app base root/or a specific root and pass that to your angular controller/angular services/directives.

So in your razor view/layout file, you may do this.

@section Scripts
{
   <script src="~/Scripts/YourAngularControllerFileForThisPage.js"></script>
   <script>
        var yourApp = yourApp || {};
        yourApp.Settings = yourApp.Settings || {};
        yourApp.Settings.BaseUrl= "@Url.Content("~")";
        angular.module("app").value("appSettings", yourApp);
   </script>
}

You can access this appSettings object in your angular directive and use the Settings.BaseUrl property to build the full url to your directive template.

(function () {
    angular.module("app")
        .directive("myDirective", function (appSettings) {           
            return {
                restrict: 'E',
                templateUrl: appSettings.Settings.BaseUrl
                                       +'Scripts/MyDirectives/searchableMultiselect.html',
                controller: function ($scope) {
                    // some code
                }
            }
        });
})();

This will load the searchableMultiselect.html file from ~/Scripts/MyDirectives location.

Upvotes: 1

VRPF
VRPF

Reputation: 3118

Here is a possible way:

_Layout.cshtml

<body data-root='@Url.Content("~")'>

In Javascript:

function getDataRoot() {
    var root = null;

    if (document.body) {
        root = document.body.getAttribute('data-root');
    }

    if (!root) {
        return '/';
    }

    return root;
}

// This can be registed with angular, so it can be injected...
// Right now I will use it directly
var appUrls = {
    templateBase = getDataRoot() + 'Views/Home/';
}

....

app.directive("showdata", function ($timeout) {
return {
    templateUrl: appUrls.templateBase + 'searchableMultiselect.html',
    restrict: 'AE',

Upvotes: 0

Related Questions