実行時に作成されるリンクにdynamic templateUrlを使用する

Question

私は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' 
}). 

クリックしたときにドキュメントURLを渡している間に動作する動的なtemplateUrlを使用するにはどうすればよいですか？

// 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を見てきましたが、私はそれが私のために働くだろうかどうかを確認するために$スコープへのアクセスを持っているでしょうどこ私は表示されません。

Answer 1

あなたが提供するリンクはディレクティブのためのものであり、その下のサンプルを処理するためのものです。 角度を使って作業するときに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