Background
We have a old project which is developed with Angular 1.4.8. For example:
// controller
$scope.nameOpts = {
...
};
$scope.type = {
...
};
// view
<my-form label-width="labelWidth">
<my-item >
<my-item-label>
<span class="form-title-txt fs-txt" ng-bind="i18n.name"></span>
</my-item-label>
<div class="clearfix">
<div class="f-left">
<input class="w311"
ng-style="{width: 2 * i18n.btn_width}"
ng-model="nameOpts.name"
ng-change="nameOpts.change(nameOpts.name)">
</div>
</div>
</my-item>
<my-item>
<my-item-label>
<span class="form-title-txt cmn-fs-txt" ng-bind="i18n.list_index"></span>
</my-item-label>
<div class="f-left" >
<my-btn-radio-group
items="type.items"
selected-id="type.selectedId"
change="type.change">
</my-btn-radio-group>
</div>
</my-item>
...
</my-form>
We want to refactor the project with custom components using directives. The following is the code of our component.
// myNameInput component
define([], function () {
function ctrl($scope) {
$scope.nameOpts = {...};
...
}
return {
templateUrl: 'name.html',
replace: true,
scope: {},
controller: ctrl
};
});
// name.html
<div>
<my-item>
<my-item-label>
<span class="form-title-txt fs-txt" ng-bind="i18n.name"></span>
</my-item-label>
<div class="clearfix">
<div class="f-left">
<input class="w311"
ng-style="{width: 2 * i18n.btn_width}"
ng-model="nameOpts.name"
ng-change="nameOpts.change(nameOpts.name)">
</div>
</div>
</my-item>
</div>
We require the component in the controller and use it in the view:
// controller
define([
'app/components/insCharSet/charSet'
], function () {...});
// view
<my-form label-width="labelWidth">
<my-name-input></my-name-input>
...
</my-form>
Problem
We can develop components with directives. But the performance is not good. Compare with the view in the previous way, the components render is slower.
I have a few questions:
1) why the custom components render slower?
2) Although the position of component my-name-input is before, actually it is rendered after my-btn-radio-group, why?
3) Is it a good practice using custom components with Angular 1.4?
4) Or what is the best practice?
