javascript - Directives with Isolated scope versions conflict -
in angular app, have directive "editable". written on angular version 1.2.0-rc.2 , worked well, when upgraded framework version 1.2.13 - directive broke. checked capability other versions, , confused, because directive works 3 versions: 1.2.0rc1, 1.2.0-rc.2 , 1.2.0-rc.3
in new versions directive works 2 ugly edits: 1. directive's property "terminal" set "true" 2. compile element in "link" function
directive have simple logic:
- show savedvalue
- click on button "edit" -> show input new value
- click on button "ok" save value - > show new savedvalue
here code:
- this version works: http://plnkr.co/edit/vhzvzk?p=preview
- this version broken: http://plnkr.co/edit/nffddj?p=preview
- this version works new insertions: http://plnkr.co/edit/7msiy0?p=preview
so, have questions:
- why it's happens?
- what differences between 1.2.0-rc* versions , other, brake down directive.
- is there way, better compile directive , adding terminal property repair directive, because many other directives broken too?
first understanding
they changed in way contents compiled against determined scope in case of isolated scope.
breaking changes version 1.2.0
please see breaking changes brought version 1.2.0 :
- $compile:
- due d0efd5ee, child elements defined either in application template or in other directives template not isolate scope. in theory, nobody should rely on behavior, rare - in cases isolate directive has template.
- due 909cabd3, directives without isolate scope not isolate scope isolate directive on same element. if code depends on behavior (non-isolate directive needs access state within isolate scope), change isolate directive use scope locals pass these explicitly.
in specific case, edit button cannot access properties , methods implemented on isolated scope. able temporarily in "rc" versions.
fast solution
don't use isolated scope directive.
deeper solution
you doing quite weird. create isolated scope ngmodel binded scope used directive.
but, working ngmodel directive doesn't work way. have require ngmodelcontroller instance added ngmodel directive, using directive property called require, fill name of directive requiring controller of, "ngmodel". forth argument of link function refer ngmodelcontroller instance quite documented on angular documentation.
so ! :
- don't use isolated scope when don't need it
- remember isolated scope not directly accessible on element anymore, except using
$$childheadproperty of course ... should not !
Comments
Post a Comment