私の角度jsアプリケーションでは、ng-repeatの中にディレクティブがあります。ディレクティブには、HTML部分が読み込まれたテンプレートがあります。そのテンプレートの中で、私はui-srefルータを動的に設定すると宣言しています!ディレクティブテンプレートの動的ui-sref角度Js
これは機能しません!
私は指令UI-SREF worksファインを使用しないFiddle
を試してみました。しかし、私はディレクティブのテンプレートにそれが必要です。
MY HTML部分
<div ng-repeat="sp in obj.PEs">
<div draw-pe proc="{{sp.peId}}"></div>
</div>
<div style="border:1px;" ui-view="properties"></div>
私のスクリプトパート
var myApp = angular.module('myApp', ["ui.router"]);
myApp.controller("testCtrl", function($scope) {
$scope.obj = {
"PEs": {
"1": {
"peId": "1",
"peName": "Exp1",
"peDisplayName": "Exp",
"peType": "Exp",
"peCategory": "PE"
},
"2": {
"peId": "2",
"peName": "RN1",
"peDisplayName": "RNull",
"peType": "RN",
"peCategory": "PE"
}
}
}
})
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('Exp', {
url: '/Exp/:peId',
views: {
"properties": {
template: ".<h3>I am Exp ! </h3>",
controller: function($scope, $stateParams) {
var peId = $stateParams.peId;
alert("Peid-> " + angular.toJson($scope.obj.PEs[peId]));
}
}
}
})
.state('RN', {
url: '/RN/:peId',
views: {
"properties": {
template: "<h3> I am RN ! </h3>",
controller: function($scope, $stateParams) {
var peId = $stateParams.peId;
alert("Peid-> " + angular.toJson($scope.obj.PEs[peId]));
}
}
}
})
});
myApp.directive("drawPe", function() {
return {
restrict: "AE",
template: '<div ui-sref="{{peObj.peType}}({ peId:peObj.peId })"> <h5>{{peObj.peDisplayName}}</h5></div>',
link: function($scope, element, attrs) {
var procId = $scope.$eval(attrs.proc);
alert(procId);
// alert(angular.toJson(scope.obj.processElements[procId]))
$scope.peObj = $scope.obj.PEs[procId];
}
}
})
出力部分をクリックの上、ブラウザのコンソールを参照してください!
ERROR
Error: Invalid state ref '({ peId:peObj.peId })'
何ディレクティブテンプレート内の動的な状態名を呼び出すためのベストプラクティスになりますか?私はこれまでの質問と回答を読んだことがありますが、Angular Jsを初めて勉強したときのように私の考えではわかりません。
任意のアイデア/ヘルプはあなたが$あなたの範囲が変化したときに、あなたのディレクティブのテンプレートをコンパイルするサービスをコンパイル使用することができます
おかげ
[動的にui-sref Angularjsの値を設定する]の複製が可能です(http://stackoverflow.com/questions/24349731/dynamically-set-the-value-of-u-sref-angularjs) – fracz