Is there a workaround to get the object directly to directive scope?

Question

In my directive, I am getting the properties from the element attr (ng-repeat) and using the directive internal scope, like this:

 <program-name name="{{appName.title}}" percent="{{appName.percent}}" company="{{appName.company}}" data-page="Home" index="{{$index}}" ng-repeat="appName in appNames"></program-name>

and in the directive :

scope: {
    name: '@',
    index: '@',
    percent: '@',
    company: '@'
},

works fine. but in case if i required to get all my properties from object is this only one way? say i have 20 peroperties in my appName object then is it requried to pass all 20 like this?

Is there any way to get all this properties as object directly from the element to scope?

if so, how to do that?

here is fiddle

Answer 1

you can just give your directive the appName object

JS

scope: {
         appName: '='
       },

HTML

<program-name app-name="appName" ng-repeat="appName in appNames"></program-name>

Answer 2

Is there any way to get all this properties as object directly from the element to scope?

Yes, you can use the = operator in your directive's isolated scope. This will also ensure 2-way binding.

scope:{
       appName: '='
      }

Also, please note that if you want all properties from appName in your directive, then do not create an isolated scope. If you dont specify scope:{} then directive will take the same scope as template it was used in!