Динамический пользовательский интерфейс в шаблоне директивы Angular Js

Question

Динамический пользовательский интерфейс в шаблоне директивы Angular Js

0

В моем угловом приложении js у меня есть директива внутри ng-repeat. Директива имеет шаблон, в котором загружается часть HTML. Внутри этого шаблона я объявляю динамически настраиваемые состояния ui-sref Router!

Это не работает!

Я попробовал Fiddle

Без использования директивы ui-sref работает отлично. Но мне это нужно в шаблоне Directive.

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

См. Консоль браузера, щелкнув на выходе Part!

ОШИБКА

Ошибка: неверное состояние ref '({peId: peObj.peId})'

Какая будет лучшая практика для вызова динамических имен состояний внутри шаблонов директив? Я прочитал несколько ранее заданных вопросов и ответов, но я не совсем понимаю эту идею, поскольку я новичок в Angular Js.

Любая идея/помощь

благодаря

Sri 02 июнь 2016, в 07:50

Источник

0

Возможный дубликат динамически установленного значения ui-sref Angularjs
fracz 02 июнь 2016, в 06:16

Теги:

html

angularjs

angular-ui-router

1 ответ

Ещё вопросы

Возможный дубликат динамически установленного значения ui-sref Angularjs

feyyaz · Accepted Answer · 2016-06-02T08-28-00.000Z

Вы можете использовать службу компиляции $ для компиляции вашего шаблона директивы при изменении области действия.

Ваша директива может выглядеть так:

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>

Рабочая скрипка здесь.

Мне нужно связать корневой объект obj в peObj по ссылке, я не смог получить доступ к объекту, потому что область действия изменилась? Что мы должны сделать, чтобы сделать переменную obj доступной в функции ссылки? console.log (scope.obj); -> это дает неопределенное
Вы можете назначить переменную obj для $ rootScope вместо $ scope. Затем используйте его в директиве, например: myApp.directive ("drawPe", function ($ rootScope) {return {link: function (...) {console.log ($ rootScope.obj)}});
На самом деле это работает в скрипке, но не в моем приложении. Моя переменная rootScope недоступна в директиве drawPe. становится неопределенным.
Вы определили $ rootScope в своем контроллере как зависимость? Ваш контроллер должен запускаться как: myApp.controller ("testCtrl", function ($ rootScope) {$ rootScope.obj = {.....
Спасибо за вашу замечательную помощь! Но без $ watch, только если мы скомпилируем $ compile (element.contents ()) (scope); моя проблема была решена! Спасибо чувак !