Monday 15 April 2013

angularjs - Angular directive with custom / conditional actions -



angularjs - Angular directive with custom / conditional actions -

i have questions angular directives. next code:

main controller & directive:

<div ng-controller='shopscontroller'> <update-createform shop="shop" action='update()'></update-createform> </div>

directive js: (this way direction action take 'action' input argument)

angular.module('app') .directive('updatecreateform', function(){ homecoming { templateurl: '/form.html', restrict : 'e', scope: { shop: '=', action: '&' } } })

form.html template:

<form name="shopform" ng-submit='action(shopform.$valid)' novalidate> <input type='text' name='name' required/> <input type='text' name='description' required/> </form>

shopscontroller has method:

exports.update = function(isvalid) { if (isvalid) { /* update shop*/ } }

what doing passing shop info server, send form can view and/or update shop info.

it's want create shop info using same form. in case send in shop = [] , action='create()' instead.

my controller has update method takes argument isvalid. don't know how pass directive shopform.$valid outside , send server.

two questions:

how isvalid variable directive? following ari lerner's ng-book: said it's possible following:

http://www.scribd.com/doc/215682987/ng-book-the-complete-book-on-angularjs-2013

instead of using directive above utilize

<update-createform shop="shop" on-update='update()' on-create='create()'></update-createform>

and directive 'action' alter 'update' when shop not empty otherwise action equals 'create'? tried code cannot work..

any help appreciated!

you can add together argument action=update(isvalid). gets resolved on form submit.

so html this

<div ng-controller='shopscontroller shopctrl'> <update-createform shop="shop" action='shopctrl.update(isvalid)'></update-createform> </div>

and form similar this

<form name="shopform" ng-submit='action({isvalid:shopform.$valid})' novalidate> <input type='text' name='name' required/> <input type='text' name='description' required/> <button type="submit">submit</button> </form>

and controller be

.controller('shopscontroller', function() { var exports = this; exports.update = function(isvalid) { console.log(isvalid) if (isvalid) { /* update shop*/ } } })

http://plnkr.co/edit/qh3hzkgnoo1ntp9pfsmh?p=preview

or

there's way, although find syntax little odd. not first solution feels intuitive either.

http://plnkr.co/edit/crn9rurekjiozjibte80?p=preview

found 1 in first-class post directives dan wahlin

http://weblogs.asp.net/dwahlin/creating-custom-angularjs-directives-part-3-isolate-scope-and-function-parameters

angularjs angularjs-directive

No comments:

Post a Comment