Dynamische Ui-Sref in Direktivenschablone Angular Js

Question

In meiner angular js Anwendung habe ich eine Direktive innerhalb einer ng-Wiederholung. Die Richtlinie hat eine Vorlage, in die der HTML-Teil geladen wird. Innerhalb dieser Vorlage deklariere ich einen ui-sref Router, der dynamisch Zustände setzt!

Dies funktioniert nicht!

Ich habe versucht, eine Fiddle

Ohne eine Richtlinie ui-sref works Fein zu verwenden. Aber ich brauche es in der Vorlage der Richtlinie.

MEIN HTML TEIL

<div ng-repeat="sp in obj.PEs"> 
    <div draw-pe proc="{{sp.peId}}"></div> 
</div> 

<div style="border:1px;" ui-view="properties"></div> 

My Script Teil

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]; 
    } 
    } 
}) 

Siehe Browser-Konsole die Ausgabe Teil auf klicken!

ERROR

Error: Invalid state ref '({ peId:peObj.peId })'

Was wird die beste Praxis sein dynamischen Zustand Namen innerhalb Richtlinien Vorlage zu nennen? Ich habe einige vorher gestellte Fragen und Antworten gelesen, aber ich bin nicht klar mit der Idee, da ich neu bei Angular Js bin.

Jede Idee/Hilfe geschätzt

Dank

Answer 1

Sie können $ service kompilieren verwenden Ihre Richtlinie der Vorlage, wenn Änderungen Ihr Umfang zu kompilieren.

Ihre Richtlinie könnte wie folgt aussehen:

myApp.directive("drawPe", function($compile) { 

return { 
restrict: "AE", 
tranclude: true, 
scope: { 
    peObj: '=' 
}, 
template: '<a href="" ui-sref="{{peObj.peType}} ({peId: peObj.peId})"> <h5>{{peObj.peDisplayName}}</h5></a>', 
link: function(scope, element, attrs) { 
    console.log(scope.peObj); 
    scope.$watch(
    function(scope) { 
     // watch the 'compile' expression for changes 
     //return scope.$eval(attrs.compile); 
    }, 
    function(value) { 
     $compile(element.contents())(scope); 
    } 
); 
    } 
} 
}); 

Und Ihre html:

<div ng-repeat="sp in obj.PEs"> 
    <div draw-pe pe-obj="sp" proc="{{sp.peId}}"></div> 
</div> 

<div style="border:1px;" ui-view="properties"></div> 

Arbeits Geige ist here.