0

私のangular jsアプリケーションでは、ng-repeat内にディレクティブがあります。ディレクティブには、HTML 部分が読み込まれるテンプレートがあります。そのテンプレート内で、状態を動的に設定する ui-sref Router を宣言しています!

これは動作しません！

私はフィドルを試しました

ディレクティブ ui-sref を使用しなくても問題なく動作します。しかし、ディレクティブのテンプレートで必要です。

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

出力パーツをクリックすると、ブラウザ コンソールが表示されます。

エラー

エラー: 無効な状態参照 '( { peId:peObj.peId } )'

ディレクティブ テンプレート内で動的状態名を呼び出すベスト プラクティスは何ですか? 以前に尋ねられた質問と回答をいくつか読みましたが、Angular Js を初めて使用するため、その考えが明確ではありません。

任意のアイデア/ヘルプをいただければ幸いです

ありがとう

4

1 に答える 1