지시어 템플릿의 동적 ui-sref 각도 Js

Question

내 각도 응용 프로그램에서 ng-repeat 내부에 지시문이 있습니다. 지시문에는 HTML 부분이로드되는 템플릿이 있습니다. 그 템플릿 안에는 ui-sref 라우터가 동적으로 상태를 설정한다고 선언됩니다!

이것은 작동하지 않습니다!

나는 지침의 UI (SREF) works 파인를 사용하지 않고 Fiddle

을 시도했습니다. 하지만 Directive의 템플릿에이 템플릿이 필요합니다.

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를 처음 접했을 때 나는 그 생각으로는 분명하지 않습니다.

은 어떤 아이디어/도움말

감사

Answer 1

당신은 때 범위 변경하여 지침의 템플릿을 컴파일 서비스를 컴파일 $ 사용할 수 있습니다

감사.

귀하의 지침은 다음과 같을 수 있습니다 :

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

그리고 당신의 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> 

근무 바이올린 here입니다.