对运行时构建的链接使用动态 templateUrl答案

【问题标题】：Using Dynamic templateUrl for links built at runtime对运行时构建的链接使用动态 templateUrl
【发布时间】：2016-03-29 21:58:09
【问题描述】：

我正在编写一个 AngularJS 网站，我需要一个动态 templateUrl。

如果我对我的 url 模板进行硬编码，我的路由就可以工作。

when('/levelthree', {
    templateUrl: 'views/levelthree/1.001_WhitePaper.htm',
    controller: 'LevelThreeController'
}).

当我尝试这个时，它没有。

when('/levelthree', {
    templateUrl: function () {
        return 'views/levelthree/' + retrieveStorageItem('LevelThreeDocumentSelected');
    },
    controller: 'LevelThreeController'
}).

我怎样才能有一个动态的templateUrl，在点击时传递文档url？

// HREF
<a id=\"a0\" style=\"color: rgb(0, 0, 0);\" href=\"#levelthree\" data-url=\"1.001_WhitePaper.htm\">White Paper <i 
    class=\"fa fa-play\" style=\"color: rgb(0, 128, 0);\"></i></a>

// URL of the HREF, when clicked.
http://localhost:65155/testwebsite/Index.html#levelthree

// Code that gets the document I need.
$(document).on("click", ".openLevelThree", function (e) {
    var documentSelected = $(this).children('a').attr('data-url');

    setStorageItem("LevelThreeDocumentSelected", documentSelected);
});

我查看了this，但看不到在哪里可以访问 $scope 以查看它是否适合我。

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您提供的链接是针对指令的，下面是一个示例来处理它。在使用 Angular 时尽量避免使用 jquery。

var app = angular.module('app', ['ngRoute']);
app.config(function($routeProvider) {
  localStorage.setItem("LevelThreeDocumentSelected", "1.001_WhitePaper.htm");

  $routeProvider
    .when('/', {
      template: '<h3>Home view</h3>' +
      '<button ng-click="setLevelThreeDocuments(\'1.001_WhitePaper.htm\')">1</button>' +
      '<button ng-click="setLevelThreeDocuments(\'2.002_WhitePaper.htm\')">2</button>' +
      '<button ng-click="setLevelThreeDocuments(\'3.003_WhitePaper.htm\')">3</button>',
      controller: 'mainController'
    })
  .when('/levelthree', {
    templateUrl: function() {
      var url = localStorage.getItem('LevelThreeDocumentSelected');
      console.log(url);
      return url;
    },
    controller: 'LevelThreeController'
  })
});

app.controller('mainController', function($scope) {
  $scope.setLevelThreeDocuments = function(s) {
    localStorage.setItem("LevelThreeDocumentSelected", s);
  }
});

app.controller('LevelThreeController', function($scope) {
  $scope.message = 'I am LevelThreeController';
});

https://plnkr.co/edit/VZ7WLlIEKq1gpy156GjJ?p=preview

【讨论】：

你是好朋友 :)