Mae gennyf ychydig o apps $http.get hwnnw yn gwneud() eisiau galw a allu dangos neges gwall ddel wedi'i fformatio gyda manylion y gwall hyll cudd, ond hygyrch.  Yn y bôn, hwn:

Ac yna os bydd y defnyddiwr yn syrthio i'w le ar y gwall, maent yn gweld mwy o wybodaeth:

Pethau syml.  Ers y gall yr union un camgymeriad posibl yn ymddangos yn y sgrin gweinyddol yn ogystal â sgrîn defnyddiwr terfynol, Roedd yn amlwg yn galw am Gyfarwyddeb onglog personol.  Rwy'n  Roedd hyn yn cyfres eithriadol erthyglau (http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-i-the-fundamentals) gan fawr Dan Wahlin.  Yn dilyn ei gyngor, Gyflym iawn creu yr <Helo byd> Cyfarwyddeb a symud ymlaen at fy squeegee arddangos gwall mwy cymhleth. Yr wyf yn rhedeg i ychydig o drafferth gyda'r Gyfarwyddeb hon mwy cymhleth.  Hapus, math o hap a damwain, Roedd wrthyf WebStorm (Golygydd y defnyddiaf y dyddiau hyn) bod y ffeil JS ffeil onglog, ac fe 'm helpodd ffigur allan y mater.  Mae hyn yn y Cod ar gyfer y Gyfarwyddeb ei hun:

angular.module("CDLApp").Gyfarwyddeb("generalCdlErrorHandler", swyddogaeth() {

    dychwelyd {
        cyfyngu ar: "E",
        cymryd lle: wir,

        cwmpas: {
            retrieveLastConfigurationError: "&"
        },

        templed:
          '<dosbarth DIV = "rhybuddio rhybudd perygl" rôl = "rhybuddio" ng-init = "doShowExpandedErrorDetails = wir" Sioe ng = "retrieveLastConfigurationError()">' +
          ' Roedd gwall I/O neu eraill gwall.  Mae hyn fel arfer yn digwydd oherwydd na ellid ffeil data ffurfweddu ' +
          ' canfod neu Mae'r ffeil ffurfweddu yn cynnwys gwybodaeth anghywir (megis cyfeirnodi Llyfrgell ddogfen ' +
          ' nad yw'n bodoli).' +
          '  <br />' +
          '  <DIV ng-sioe = "doShowExpandedErrorDetails">' +
          '    <href = "#" Cliciwch ng = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          'Cliciwch yma i guddio manylion.' +
          '    </1>: ' +
          '    <br />' +
          '    <cyn>{{retrieveLastConfigurationError() | json}}</cyn>' +
          '    <br />' +
          '  </div>' +
          '  <DIV ng-sioe = "!doShowExpandedErrorDetails">' +
          '    <href = "#" Cliciwch ng = "doShowExpandedErrorDetails = ! doShowExpandedErrorDetails">' +
          'Cliciwch yma i ehangu manylion y gwall.' +
          '    </1>' +
          '  </div>' +
          '</div>'
    };
});

Yn y bôn, Yr wyf yn creu elfen newydd o'r enw "generalCdlErrorHandler".  Mae angen mynediad i swyddogaeth a elwir retrieveLastConfigurationError, ac ymdrinnir â hynny yn y gwrthrych cwmpas.  Mae'n debyg mai gallai dim ond defnyddiais cwmpas y rhiant, ond mae hynny'n deimlad yn ddiog.  Os yw unrhyw un yn credu dylai wedi gwneud hynny, Byddwn wrth fy modd i glywed am hynny yn y sylwadau.

Roedd hyn yn iawn, ond doeddwn i ddim yn cael unrhyw beth.  Unrhyw wallau yn codi dro ar ôl yn y Consol (o leiaf unwaith Sefydlog yr holl gamgymeriadau sx rwy'n creu ar hyd y ffordd).  Dim ond doeddwn i ddim yn cael unrhyw allbwn o'r Gyfarwyddeb.  Aeth ac yn ychwanegu rhai testun Sefydlog cyn y Gyfarwyddeb ng-sioe a * oedd * yn cael. Roedd hyn yn gwneud imi feddwl bod efallai nad oedd y Gyfarwyddeb yn caniatáu ymhlyg creu vars newydd fel "doShowExpandedErrorDetails" neu "ng-init" yno. 

Es yn ôl i HTML i weld os cefais math a'r tro hwn WebStorm helpodd fi.  Roedd wedi bod yn pasio yn y swyddogaeth retrieveLastConfigurationError fel hyn:

<Cyffredinol-cdl-gwall-triniwr retrieveLastConfigurationError="CDLController.retrieveLastConfigurationError()">
</Cyffredinol-cdl-gwall-triniwr>

Ond mewn gwirionedd roedd angen i hyn fod:

<Cyffredinol-cdl-gwall-triniwr adalw-olaf-ffurfweddu-gwall = "CDLController.retrieveLastConfigurationError()">
</Cyffredinol-cdl-gwall-triniwr>

Roedd WebStorm yn ddigon call i wybod ei bod yn gorfod cael eu cysylltnodi.  Os nad oedd wedi darparu awgrym hwnnw, Byddai wyf fwy na thebyg yn dal datrys problemau hyn .  Amser hwyl!

Y gamp yw hyn: Nid yn unig y mae yr enw elfen Gyfarwyddeb cysylltnodi, Felly mae unrhyw nodweddion ydych yn ychwanegu at ei.  Unwaith yr ychwanegodd y cysylltnod, hyn i gyd yn gweithio'n iawn.  Enillodd tiwtorial a ddigwyddodd i ddefnyddio enwau un byr, felly doeddwn i ddim yn gwneud y cysylltiad.

Hope mae hyn yn helpu rhywun.

</diwedd>

Tanysgrifio i fy mlog.

Dilynwch fi ar Twitter yn http://www.twitter.com/pagalvin

Blog hwn swyddi yn disgrifio sut y gallwch gael lluosog oedd Angular.js yn seiliedig ar SharePoint we rhannau (Cyfeirir at drwy'r we Golygydd cynnwys rhan) ar yr un dudalen. Yr wyf yn galw we Golygydd cynnwys rhan (CEWP) bod cyfeiriadau JavaScript a adeiladwyd gan ddefnyddio fframwaith Angular.js onglog we rhan."

Onglog y broses bootstrap yn hynod hawdd ac mae bron bob enghraifft a welwch chi ar y internets yn mynd rhywbeth fel hyn:

<html ng-ap = 'myApp'>

<bla /><bla /><bla />

</html>

Mae hyn yn torri i lawr, Fodd bynnag,, Os ydych am i alluogi CEWP lluosog sy'n cynrychioli rhannau we onglog lluosog ar yr un dudalen. Bydd onglog unig awtomatig bootstrap erbyn y Gyfarwyddeb ng-app cyntaf mae'n canfod – leiaf o fersiwn onglog 1.3.6. Mae'r ateb yn eithaf syml – eich hun bootstrap eich cod, yn hytrach. Mae uchod bellach newid i rywbeth fel hyn:

<corff>
<div id =”bootstrapHere” rheolydd ng =”myController fel theController”>
<bla /><bla /><bla />
</div>
</corff>

<SGRIPT src =”//AJAX.googleapis.com/AJAX/libs/angularjs/1.3.6/angular.JS”></sgript>

<sgript>
angular.bootstrap(angular.element(document.getElementById(“bootstrapHere”)),['myApp']);
</sgript>

Yn y bôn, yn hytrach na defnyddio ap ng ar yr elfen i wneud eich Ymddangosai'r, Mae eich slapio ID ar elfen honno. Yna, defnyddio y bootstrap() Dull ar ei hun onglog i reoli'r broses bootstrapping ar redeg-amser. Rwyf wedi profi hyn gyda tair rhan ar y we onglog gwahanol ar yr un dudalen ac mae'n gweithio swyn.

</diwedd>

Tanysgrifio i fy mlog.

Dilynwch fi ar Twitter yn http://www.twitter.com/pagalvin