Exploring the utilization of the new .component() method in angular 1.5 has been a challenge. There is limited information available on its usage, and even the angular documentation does not provide clear guidance.
Attempting to pass the scope or an object from the scope to the .component in order to utilize it in the template section has proven difficult. The only parameters that can be passed are $element and $attrs. I tried passing the object through an attribute in the HTML, but it only resulted in the string representation of the object's name.
Various attempts were made to have it recognized as a variable:
my-attr="item.myVal"
my-attr="{item.myVal}"
my-attr="{{item.myVal}}"
Regardless of the approach, the result was always the string literal and not the actual value of the variable. How can I ensure that it is interpreted as a variable?
Despite exploring the use of bindings: {}, the template:{} did not have access to the variables.
Presented below is the current state of my component:
export var ItemListAction = {
controller: 'PanelCtrl as itemCtrl',
isolate: false,
template: ($element: any, $attrs: any): any=> {
var myVal: any = $attrs.myAttr; // returns "item.myVal"
var listAction: string = compileListAction();
return listAction;
}
};
Here is the HTML representation of my component:
<panel-item-list-action my-attr="item.myVal"></panel-item-list-action>
Shown below is the angular module declaration for the component:
angular.module('Panel', []).component('panelItemListAction', ItemListAction)