Html 指令模板中的动态ui sref

在angular js应用程序中，ng repeat中有一个指令。指令有一个加载HTML部分的模板。在该模板中，我声明了一个ui sref路由器，动态设置状态

这不行

我已经试过了

不使用指令ui sref Fine。但我需要它在指令的模板中

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

var myApp=angular.module（'myApp'，[“ui.router”]）；
控制器（“testCtrl”，函数（$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（函数（$stateProvider，$urlRouterProvider）{
$urlRouterProvider。否则（'/'）；
$stateProvider
.state（'Exp'{
url:“/Exp/：peId”，
观点：{
“财产”：{
模板：“.我是Exp！”，
控制器：函数（$scope，$stateparms）{
var peId=$stateParams.peId；
警报（“Peid->”+angular.toJson（$scope.obj.PEs[Peid]）；
}
}
}
})
.州（“RN”{
url:“/RN/：peId”，
观点：{
“财产”：{
模板：“我是RN！”，
控制器：函数（$scope，$stateparms）{
var peId=$stateParams.peId；
警报（“Peid->”+angular.toJson（$scope.obj.PEs[Peid]）；
}
}
}
})
});
myApp.directive（“drawPe”，function（））{
返回{
限制：“AE”，
模板：“{peObj.peDisplayName}}”，
链接：函数（$scope，element，attrs）{
var procId=$scope.$eval（attrs.proc）；
警报（procId）；
//警报（angular.toJson（scope.obj.processElements[procId]））
$scope.peObj=$scope.obj.PEs[procId]；
}
}
})

单击输出零件时，请参见浏览器控制台

错误

错误：无效的状态引用“（{peId:peObj.peId}）”

在指令模板中调用动态状态名称的最佳实践是什么？我已经阅读了一些以前被问及的问题和答案，但我不清楚的想法，因为我是新来的

有什么想法/帮助吗

---

谢谢

当范围发生变化时，您可以使用$compile service来编译指令的模板

您的指令可能如下所示：

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

myApp.directive（“drawPe”，函数（$compile）{
返回{
限制：“AE”，
恍惚：真的，
范围：{
peObj:“=”
},
模板：“”，
链接：函数（范围、元素、属性）{
console.log（scope.peObj）；
范围.$watch(
职能（范围）{
//观察“compile”表达式的变化
//返回范围$eval（attrs.compile）；
},
函数（值）{
$compile（element.contents（））（范围）；
}
);
}
}
});

以及您的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>

---

工作小提琴是。

当范围发生变化时，您可以使用$compile服务编译指令的模板

您的指令可能如下所示：

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

myApp.directive（“drawPe”，函数（$compile）{
返回{
限制：“AE”，
恍惚：真的，
范围：{
peObj:“=”
},
模板：“”，
链接：函数（范围、元素、属性）{
console.log（scope.peObj）；
范围.$watch(
职能（范围）{
//观察“compile”表达式的变化
//返回范围$eval（attrs.compile）；
},
函数（值）{
$compile（element.contents（））（范围）；
}
);
}
}
});

以及您的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>

---

fiddle正在工作。

的可能副本的可能副本我需要在peObj in链接中绑定rootscope obj，我无法访问obj，因为范围已更改？我们应该怎样做才能使obj变量在link函数中可访问？console.log（scope.obj）；->这使您可以将“obj”变量指定给$rootScope而不是$scope。然后在指令中使用它，比如：myApp.directive（“drawPe”，function（$rootScope）{return{link:function（…）{console.log（$rootScope.obj）}}）；实际上它在fiddle中工作，但在我的应用程序中不工作。我的rootScope变量在drawPe指令中不可访问。未定义。是否在控制器中将$rootScope定义为依赖项？控制器的启动方式应为：myApp.controller（“testCtrl”，function（$rootScope）{$rootScope.obj={…..谢谢你的帮助！但是如果我们编译$compile（element.contents（））（scope），没有$watch，我的问题就解决了！谢谢你！我需要在链接中的peObj中绑定rootscope obj，我无法访问obj，因为作用域已更改？我们应该怎么做才能在链接函数中访问obj变量？console.log（scope.obj）；->这提供了undefinedYou可以将'obj'变量分配给$rootScope而不是$scope。然后在指令中使用它，比如：myApp.directive（“drawPe”，function（$rootScope）{return{link:function（…）{console.log（$rootScope.obj）}）；实际上它在fiddle中工作，但在我的应用程序中不工作。我的rootScope变量在drawPe指令中不可访问。未定义。是否在控制器中将$rootScope定义为依赖项？控制器的启动方式应为：myApp.controller（“testCtrl”，function（$rootScope）{$rootScope.obj={…..谢谢你的帮助！但是如果我们编译$compile（element.contents（））（scope），没有$watch，我的问题就解决了！谢谢你！