First page Back Continue Last page Overview Image
{WidgetName}.js link Function
- The “link” section of this file also acts like a constructor and gets called after Angular has placed your HTML into the DOM. It passes to you the $scope for this instance of the Widget, the $element is was placed in, and the $attrs that the user assigned to this element.
- In the Template.js, there is code to retrieve the “value” attribute. You may not need a value, but it is there if you want your user to pass in something that allows this instance of the Widget do something with it. Follow the same convention to define as many “arguments” values as you need.
- Angular allows the attributes to be added to the DOM element in many ways, but it always converts them to CamelCase when assigning them to the $attrs object. I have used the following naming convention for all my Widgets, “data-sra-args-{argument-name}”, to help avoid conflicts with other attributes. For example “data-sra-args-car-number”, will get assigned to the $attrs attribute as “$attr.sraArgsCarNumber”.
- The $attr.sraArgsData attribute can be appended to, to subscribe to SIM values from the server. Just separate these values with a semi-colon. These values are updated on the $scope.data object replacing slashes with periods. (For example: “Car/REFERENCE/Description” would be referenced as “$scope.data.Car.REFERENCE.Description.ValueFormatted”.
- If you need to intercept any updates from the SIM before the DOM is notified, you use the Angular $watch method. There is an example commented out in the Template.js file. When the watch result changes, the function assigned gets called and is passed the new value and old values. It is not recommended that you directly update the DOM in this function. Instead, use Angular to bind attributes, styles, etc. to $scope values and then just update the $scope and Angular will update the DOM for you.
- The “sraResize” event is watched for using Angular’s $on method. The function it calls, updates the height on you element for you. You can intercept it by providing your own function, then calling the original from your code.