angularjs - Customized ng-repeat attr directive with transcluding elements -


ok, swear i've searched on answers this. each answer i'm finding almost, not quite, not i'm looking for.

goal

i'm trying write directives let me dry way display collections. final goal able things in view or directive looks like:

<md-grid-tile index='event' index-by='ispublic' index-key='true'>   <md-grid-tile-header>{{event.name}}</md-grid-tile-header>   <md-grid-tile-footer>     <profile-card index='eventowner' index-by='event_id' index-key='event.$id' collection='profile'>       arbitrary transcluded content uses {{profile}}     </profile-card>   </md-grid-tile-footer> </md-grid-tile>

md-grid-tile-* come angular-material, , fancy transcluding things contents. profile-card arbitrary custom directive wraps transcluded content. e.g. have common card display profile info, want put different action buttons on depending on i'm placing it.

i'm trying create index directive, act focused ng-repeat. in example:

  • the attrs on md-grid-tile element tell repeat on every event ispublic of true.
  • on profile-card element, find eventowner objects event_id matching event.$id of containing element. repeat profile objects eventowner objects reference.

problems

i've got no problems hooking data sources, run problems is:

  • creating multiple elements in dom in right place
  • repeating elements transclude content

for purposes of code samples here simplifying data sources. mockprovider replaced service creates collection based on index-* attrs.

attempt #1

.directive 'index', ['mockprovider', (mockprovider)->   restrict: 'a'   priority: 1   compile: (el,attrs)->      el.attr 'ng-repeat', 'item in collection'      post: (scope,el,attrs,ctrl,transclude)->       scope.collection = mockprovider ]

i still haven't been able figure out why can't approach work. ng-repeat attr gets attached, nothing repeated.

attempt #2

.directive 'index', ['mockprovider', (mockprovider)->   restrict: 'a'   priority: 1 # tried 1, 1001, -1000   compile: (el,attrs)->     post: (scope,el,attrs,ctrl,transclude)->       scope.collection = mockprovider       newel = angular.element el[0].outerhtml       newel.attr 'ng-repeat', 'foo in [1,2,3]'       newel.removeattr 'pb-index'       el.replacewith $compile(newel[0].outerhtml)(scope) ]

this repeats bunch of stuff, explodes with: [ngtransclude:orphan] illegal use of ngtransclude directive in template! no parent directive requires transclusion found. seems re-compilation somehow loses transcluded content? i've seen other comments warn against due inefficiency.

attempt #3

.directive 'index', ['mockprovider', (mockprovider)->   restrict: 'a'   priority: 1001   compile: (el,attrs)->     post: (scope,el,attrs,ctrl,transclude)->       el.html ""       scope.collection = mockprovider       scope.$watchcollection 'collection', (collection)->         item,index in collection           childscope = scope.$new()           childscope.item = item           transclude childscope, (newelement)->             el.append newelement

finally, tried naive re-implementation of ng-repeat. has gotten closest, still isn't working, , requires bunch more code match performance/functionality of ng-repeat.

how???

am totally on wrong track? there easy way this?


Comments

Post a Comment

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

i looking through twitter bootstrap documentation, , i'm interested in implementing dismissible popover when button clicked. here example bootstrap's docs: http://getbootstrap.com/javascript/#dismiss-on-next-click when press "dismissible popover" button os x safari browser works fine. when access same link above ios safari, button not work. is, popover not dismissed on click. why button not working ios safari? the example linked using data-trigger="focus" attribute. try changing data-trigger="click" . <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="click" title="dismissible popover" data-content="and here's amazing content. it's engaging. right?">dismissible popover</a>
Read more

Magento/PHP - Get phones on all members in a customer group -

i working on custom magento extension. working around adminhtml part , i've created custom form there. here form code: <?php class vivasindustries_smsnotification_block_adminhtml_sms_sendmass_edit_form extends mage_adminhtml_block_widget_form { public function _preparelayout() { $extensionpath = mage::getmoduledir('js', 'vivasindustries_smsnotification'); $head = $this->getlayout()->getblock('head'); $head->addjs('jquery.js'); $head->addjs('vivas.js'); return parent::_preparelayout(); } protected function _prepareform() { $form = new varien_data_form(array( 'id' => 'edit_form', 'action' => $this->geturl('*/*/save', array('id' => $this->getrequest()->get...
Read more

session - Logging Out Using PHP -

i have seen other programs regarding can't seem make work. doing wrong? want achieve after user logged out, going previous pages become restricted. i have 3 php files: 1. sample.php - main page username , password filled in 2. successful.php - user's page after logging in 3. logout.php - destorys session hinder user access pages after logging out sample.php </html> <form action="" method="post"> <table> <tr> <td>username:</td> <td>password:</td> </tr> <tr> <td><input type="text" name="username"></td> <td><input type="password" name="password"></td> </tr> <tr> <td><input type="submit" value="submit" name="submit"></td> </tr> </table> </form> </html> <?php $servername = "localhost"; $username = ...
Read more