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

Este blog posts descreve como você pode ter vários Angular.js com base em web parts do SharePoint (referenciado através de uma web part do editor de conteúdo) na mesma página. Vou ligar uma web part do editor de conteúdo (CEWP) que Referências JavaScript construído utilizando o framework de Angular.js um "Angular Web Part".

Processo de inicialização do angular é super fácil e apenas sobre cada exemplo que você encontrar na Internet é algo assim:

<ng-aplicativo HTML = 'myApp'>

<blá /><blá /><blá />

</HTML>

Isto quebra para baixo, no entanto, Se você deseja habilitar vários CEWP representando várias peças web angular na mesma página. Angular será automaticamente somente bootstrap contra a primeira directiva ng-app-achados – pelo menos a partir da versão angular 1.3.6. A solução é muito simples – seu código de inicialização manualmente em vez disso. Acima agora muda para algo parecido com isto:

<corpo>
<didentificação de IV =”bootstrapHere” ng-controlador =”myController como theController”>
<blá /><blá /><blá />
</div>
</corpo>

<script src =”//Ajax.googleapis.com/AJAX/libs/angularjs/1.3.6/angular.js”></script>

<script>
angular.Bootstrap(angular.Element(Document. getElementById(“bootstrapHere”)),['myApp']);
</script>

Basicamente, em vez de usar o ng-app no elemento para fazer sua inicialização., bate uma ID para o elemento. Em seguida, Use o bootstrap() método na angular próprio para controlar a inicialização processo em tempo de execução. Eu testei isso com três peças web angulares diferentes na mesma página e funciona um encanto.

</fim>

Subscreva ao meu blog.

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