Eu tenho um par de apps que fazem $http.get() chamadas e eu queria ser capaz de mostrar uma mensagem de erro bem formatada com detalhes de erro feio escondidos, mas acessível.  Basicamente, Isso:

E então se o usuário clica sobre o erro, Eles vêem mais informação:

Coisas simples.  Desde que o exato mesmo erro potencial pode aparecer na tela do administrativa, bem como a tela do usuário final, claramente apelou a uma directiva Angular personalizada.  EU  Encontrei este melhor série de artigos (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) pela grande Dan Wahlin.  A seguir o seu Conselho, Criei muito rapidamente uma <Hello world> a directiva e mudou-se para meu rodo de exibição de erro mais complexo. Encontrei um pouco de dificuldade com a presente directiva mais complexa.  Felizes para sempre, meio que por acaso, Eu tinha dito WebStorm (o editor que eu uso hoje em dia) que o arquivo JS foi um arquivo Angular e me ajudou a descobrir o problema.  Este é o código para a própria directiva:

angular.Module("CDLApp").Directiva("generalCdlErrorHandler", função() {

    Voltar {
        restringir: "E",
        substituir: verdadeiro,

        âmbito de aplicação: {
            retrieveLastConfigurationError: "&"
        },

        modelo:
          '<classe div = "alerta alerta-perigo" papel = "alerta" ng-init = "doShowExpandedErrorDetails = true" ng-show = "retrieveLastConfigurationError()">' +
          ' Houve um erro de e / ou outro erro.  Isso geralmente acontece porque o arquivo de dados de configuração não pôde ser ' +
          ' encontrado ou o arquivo de configuração contém informações imprecisas (como fazer referência a uma biblioteca de documento ' +
          ' isso não existe).' +
          '  <DRI>' +
          '  <div. ng-show = "doShowExpandedErrorDetails">' +
          '    <href = "#" ng-clique = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          «Clique aqui para ocultar detalhes.» +
          '    </uma>: ' +
          '    <DRI>' +
          '    <Pre>{{retrieveLastConfigurationError() | JSON}}</Pre>' +
          '    <DRI>' +
          '  </div>' +
          '  <div. ng-show = "!doShowExpandedErrorDetails">' +
          '    <href = "#" ng-clique = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          «Clique aqui para expandir os detalhes do erro». +
          '    </uma>' +
          '  </div>' +
          '</div>'
    };
});

Basicamente, Estou criando um novo elemento chamado um "generalCdlErrorHandler".  Precisa de acesso a uma função chamada retrieveLastConfigurationError e que é tratado no objeto de escopo.  Eu provavelmente poderia ter usado escopo do pai, Mas isso é preguiçoso.  Se alguém acha que eu deveria ter feito isso, Eu adoraria ouvir sobre isso nos comentários.

Isto estava tudo bem, Mas eu não estava conseguindo nada.  Não apareceu no console de erros (pelo menos uma vez consertei todos os erros de sx que criei ao longo do caminho).  Simplesmente não consegui qualquer saída da directiva.  Eu fui e acrescentou alguns texto estático antes da Directiva ng-show e eu * fez * que. Isso me fez pensar que, talvez, a directiva não tinha permissão para implicitamente criar novos vars como "doShowExpandedErrorDetails" ou um "ng-init" lá dentro. 

Voltei para o HTML para ver que se eu tinha um tipo e desta vez WebStorm me ajudaram.  Eu tinha sido passando na função retrieveLastConfigurationError, assim:

<geral-cdl-manipulador de erro retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</geral-cdl-manipulador de erro>

Mas o que realmente precisava ser isto:

<geral-cdl-manipulador de erro recuperar-último--erro de configuração = "CDLController.retrieveLastConfigurationError()">
</geral-cdl-manipulador de erro>

WebStorm foi esperto o suficiente para saber que tinha de ser hifenizadas.  Se ele não tivesse fornecido essa dica, Eu iria provavelmente ser ainda Solucionando este .  Vezes divertidos!

O truque é este: Não só é o nome do elemento a directiva hifenizado, Então são os atributos que você adicionar a ele.  Uma vez eu adicionei os hífens, tudo funcionou muito bem.  Tutorial de Dan aconteceu de eu usar nomes curtos único, Então não fiz a conexão.

Espero que isso ajude alguém.

</fim>

Subscreva ao meu blog.

Siga-me no Twitter em http://www.twitter.com/pagalvin