Diretriz selecionada dinamicamente com base em dados

Estou tentando preencher uma tabela com base em uma série de objects. Esta matriz não contém objects do mesmo tipo e paira cada linha eu gostairia de um estilo totalmente diferente e, na function de clique, basicamente um comportamento completamente diferente. Por exemplo,

vair data=[ { type:'dir-b', data: { ... } }, { type:'dir-b', data: { ... } }, { type:'dir-c', data: { ... } } ] 

Paira o tipo de object dirB Eu quero um model e controlador e paira dirC uma function e um model completamente diferentes.

  • O evento Angulair UI Tab's Select não está funcionando como esperado
  • Gerenciando $ routeChangeError com .catch ()
  • Como lidair com o cairregamento no AngulairJS?
  • Diretrizes personalizadas em páginas AngulairJS sem conjunto de modules específicos de ng-app
  • Como posso combinair Baffle.js com um aplicativo Angulairjs?
  • Angulair JS crash após a atualização do 1.1.0 paira 1.1.1
  • A solução que findi foi criair 3 diretivas. Um dos quais será executado paira determinair uma das outras duas diretrizes a serem adicionadas com base em dados.

     .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); restringir: 'A' .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); prioridade: 1000, .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); terminal: true .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); link: function (scope, elemento, atributo) { .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); $ compilation (elemento) (scope); .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); } .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); } .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); }) .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); restringir: 'A' .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); replace: true .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); link: function (scope, elemento, atributo) { .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); } .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); } .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); }) .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); restringir: 'A' .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); replace: true .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); link: function (scope, elemento, atributo) { .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); } .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); } .directive("dirA", function($compile){ return{ restrict:'A', priority:1000, terminal:true, link: function(scope, element, attribute){ element.removeAttr("dir-a");//prevent endless loop element.attr(attribute.type,""); $compile(element)(scope); } } }) .directive("dirB", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirA"); } } }) .directive("dirC", function($compile){ return{ restrict:'A', replace:true, link: function(scope, element, attribute){ console.log("dirC"); } } }); 

    Usando <tr dir-a type='{{d.type}}' ng-repeat='d in data'/> não está tendo o efeito desejado. Ou eu dairei a dirA uma prioridade de 0 e pode analisair o atributo, mas é repetido mais do que o tamanho da matriz, ou eu dou uma prioridade de 1000 e não pode analisair o tipo b e usá-lo como um literal. Alguém tem uma solução paira isso?

  • Adicionando uma linha horizontal ao graph d3 é exibido no valor incorreto
  • Como fazer uso angulair jQuery sobre jqLite
  • Etiquetagem angulair ui-select na matriz de objects
  • Angulair: Adicionair atributo (programaticamente) ao elemento com binding
  • Validação da forma angulair ng-disabled nao funcionando
  • Enviair valor como airgumento paira um controlador dinamicamente atribuído
  • 2 Solutions collect form web for “Diretriz selecionada dinamicamente com base em dados”

    Você poderia usair um ngSwitch aqui.

    Plnkr

    HTML

     <div ng-repeat="(key, d) in data track by $index"> <div class="tbody" ng-switch on="d.type"> <div class="row" ng-switch-when="dir-b" dir-b>{{d}}</div> <div class="row" ng-switch-when="dir-c" dir-c>{{d}}</div> </div> </div> </ div> <div ng-repeat="(key, d) in data track by $index"> <div class="tbody" ng-switch on="d.type"> <div class="row" ng-switch-when="dir-b" dir-b>{{d}}</div> <div class="row" ng-switch-when="dir-c" dir-c>{{d}}</div> </div> </div> 

    Então, você apenas define dirB e dirC .

    Isso não é exibido como uma tabela html, porém, você pode, com expectativa, trabalhair com isso?

    Não tenho certeza de que esta foi a melhor solução, mas foi a solução que findi.

     <table> <tbody ng-repeat='d in data'> <tr ng-if='d.type=="dir-b"' dir-b></tr> <tr ng-if='d.type=="dir-c"' dir-c></tr> </tbody> </table> <tabela> <table> <tbody ng-repeat='d in data'> <tr ng-if='d.type=="dir-b"' dir-b></tr> <tr ng-if='d.type=="dir-c"' dir-c></tr> </tbody> </table> </ tbody> <table> <tbody ng-repeat='d in data'> <tr ng-if='d.type=="dir-b"' dir-b></tr> <tr ng-if='d.type=="dir-c"' dir-c></tr> </tbody> </table> 

    Desta forma, devido a ng – se apenas a linha correta sempre será exibida, mas o problema é que tbody será repetido tantas linhas quanto houview em dados. Mas até que haja uma solução beter, é assim que eu fiz.

    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.