angularjs - Looking for Angular Directive which enables model encapsulation -

suppose have template this:

    <div>         <div>             <span>description:</span><span>{{ypobatch.yarnpobatch.yarntype.yarntypedesc}}</span>         </div>         <div>             <span>id:</span><span>{{ypobatch.yarnpobatch.yarntype.yarntypeid}}</span>         </div>     </div>       

for purposes of writing clearer, easier read , maintain code want able write like:

    <div ng-directive-that-i-am-at-a-loss-for="ypobatch.yarnpobatch.yarntype">         <div>             <span>description:</span><span>{{yarntypedesc}}</span>         </div>         <div>             <span>id:</span><span>{{yarntypeid}}</span>         </div>     </div>       

so both code blocks equivalent. there angular out of box directive can want?

well, on surface might seem neat idea... in reality i'm not sure it's idea.

method 1. fancy directive bad idea

in order this, you'll need create new scope , $compile transcluded view. in other words, take guts of element directive on, clone it, create new child scope, update have values property specify, bind new child scope cloned elements appended element. assign original property newly created scope. clear mud? heh.

edit: i've eliminated two-way binding problem

edit: ...and simplified lot

it's still little crazy though, because original $scope.property becomes scope of it's own. works.

anyhow, here's plunk of how it, , code... i don't recommend using or trying though.

app.directive('notsurewhyyoudwantthis', function($parse) {   return {     scope: true,     link: function(scope, elem, attrs) {       // property getter/setter       var property = $parse(attrs.notsurewhyyoudwantthis);        // value scope (inherited parent)       var base = property(scope);        // extend child scope whatever in base property.       angular.extend(scope, base);        // set property on parent scope child scope,       // updates both ways.       property.assign(scope.$parent, scope);     }   } }); 

<div not-sure-why-youd-want-this="ypobatch.yarnpobatch.yarntype">     <div>         <span>description:</span><span>{{yarntypedesc}}</span>     </div>     <div>         <span>id:</span><span>{{yarntypeyarntypeid}}</span>     </div> </div>   

---

method 2. best idea: scrub data proper model, mr. mvc-programmer-guy!

so best idea here least sexy, take ugly data got data source (ajax, localstorage, whatever) , groom model best represents view/display logic. put model in property on $scope. end.

this you're supposed doing in mvc, particularly if you're @ domain driven, it's not attractive people because of work incurred, , there's desire able directly submit data front in singular form.

var ypobatch= myservice.getsomedatafromsomething();  $scope.yarntype = {    id: ypobatch.yarnpobatch.yarntypeyarntypeid,    description:  ypobatch.yarnpobatch.yarntypedesc }; 

then in view:

<div>     <div>         <span>description:</span> <span>{{yarntype.description}}</span>     </div>     <div>         <span>id:</span> <span>{{yarntype.id}}</span>     </div> </div>  

boring: yes.

better: probably.

how above going situational, obviously. that's idea. , have many ways skin cat. luck.