Directive AngularJS: "templateUrl" ne fonctionne pas lorsque "template" fonctionne

Question

J'ai une directive AngularJS nommée, areaOne. Lorsque j'utilise template le modèle est affiché mais lorsque j'utilise templateUrl dans area1.js, le modèle HTML n'est pas rendu.

Qu'est-ce qui me manque ici?

côté serveur: ASP.NET MVC 5
côté client: AngularJS 1
code source est disponible sur GitHub here.

Structure du projet:

Root 
    Scripts 
     app.js 
     directives 
      area1.js 
     templates 
      area1.html 
    Views 
     Home 
      Index.cshtml 

Index.cshtml

@{ 
    ViewBag.Title = "Index"; 
} 
@section Scripts{ 
    <script src="~/Scripts/angular.js"></script> 
    <script src="~/Scripts/app.js"></script> 
    <script src="~/Scripts/directives/area1.js"></script> 
} 
<h2>Index</h2> 
<div ng-app="app"> 
    <area-one></area-one> 
</div> 

app.js

(function() { 

    angular.module("app", []); 

})(); 

area1.js

(function() { 
    angular.module("app") 
     .directive("areaOne", function() { 
      return { 
       restrict: 'E', 
       templateUrl: '~/templates/area1.html', 
       controller: function ($scope) { 
        $scope.button1Click = function() { 
         alert("button1 clicked"); 
        } 
       } 
      } 
     }); 
})(); 

area1.html

<div> 
    <button id="button1" ng-click="button1Click()">Button 1</button> 
</div> 

Answer 1

Modifier

Si vous souciez simplement à obtenir l'url racine/base du site afin que vous puissiez ajouter que Pour obtenir l'autre URL que vous recherchez, vous pouvez simplement utiliser / comme premier caractère de votre URL.

var getUsersUrl = "/api/users"; 

---

autre approche pour construire l'URL relative à l'aide des méthodes d'aide MVC. Parce que le chemin d'URL du modèle est faux!

Javascript ne peut pas convertir votre ~ au chemin de base d'application comme le rasoir. Vous devriez être capable de voir une erreur 404 si vous inspectez l'onglet de votre réseau de navigateur.

Vous ne devriez pas coder en dur votre chemin de base d'application comme ça. Vous pouvez utiliser les méthodes d'assistance Url.Content ou Url.RouteUrl dans votre vue rasoir pour générer l'URL vers la base de l'application. Il prendra soin de construire correctement l'url indépendamment de votre page/chemin actuel. Une fois que vous obtenez cette valeur, l'assigner à une variable javascript et l'utiliser dans votre autre code js pour construire vos autres URLs. Assurez-vous toujours d'utiliser javascript namespacing pour éviter les problèmes éventuels avec les variables javascript globales.

Donc, dans votre vue de rasoir (fichier de mise en page ou vue spécifique), vous pouvez le faire

<script> 
    var myApp = myApp || {}; 
    myApp.Urls = myApp.Urls || {}; 
    myApp.Urls.baseUrl = '@Url.Content("~")';  
</script> 
<script src="~/Scripts/AngularControllerForPage.js"></script> 
<script> 
    var a = angular.module("app").value("appSettings", myApp); 
</script> 

Et dans vos contrôleurs/fichiers angulaires, vous pouvez y accéder comme,

var app = angular.module("app", []); 
var ctrl = function (appSettings) { 

    var vm = this; 

    vm.baseUrl = appSettings.Urls.baseUrl; 
    //build other urls using the base url now 
    var getUsersUrl = vm.baseUrl + "api/users"; 
    console.log(getUsersUrl); 

}; 
app.controller("ctrl", ctrl) 

Vous pouvez et devez accéder à cela dans vos services de données, directives etc.

(function() { 
    angular.module("app") 
     .directive("areaOne", function (appSettings) {   
      return { 
       restrict: 'E', 
       templateUrl: appSettings.Urls.baseUrl+'/templates/area1.html', 
       controller: function ($scope) { 
        $scope.button1Click = function() { 
         alert("button1 clicked"); 
        } 
       } 
      } 
     }); 
})();