Hi, I am trying to wrap the bootstrap-select within a directive (Angular js 1.x).
Once the directive renders, I can select values, but the data bound to VM displays other values. For instance, if I select 'No', it will show 'Yes', etc.
Can you please have a look? I trying to make use of same components used by the framework without need to add other controls, at the same time, I want to encapsulate things together.
(function () {
function YesNoDecline($timeout) {
return {
restrict: 'A',
replace: true,
scope: {
id: '@',
name: '@',
data: '=ds'
},
template: '<select class="form-control bs-select" id="{{ id }}" name="{{ name }}"' +
' ui-jq="selectpicker" ui-options=\'{ iconBase: "fa", tickIcon: "fa fa-check" }\'>' +
' <option ng-repeat="obj in data" value="{{ obj.value }}">{{ obj.text }}</option>' +
'</select>',
link: function (scope, element, attrs, ngModelCtrl) {
var id = '#' + scope.id;
$timeout(function () {
$(id).selectpicker('refresh');
}, 0);
}
};
};
YesNoDecline.$inject = ['$timeout'];
appModule.directive('yesNoDecline', YesNoDecline);
})();
The way I call this directive:
<div yes-no-decline
name="Diet"
id="Diet"
ds="[{
value: 'No', text: 'No'
}, {
value: 'Yes', text: 'Yes'
}, {
value: 'Decline to answer', text: 'Decline To Answer'
}]"
ng-model="vm.diet">
</div>
{{ vm.diet}}
Thanks,.
4 Answer(s)
-
0
Hi,
How did you bind the select item's model to outer vm.diet ? I couldn't understand that part. I haven't used select as an attribute directive, we normally do it like this:
<a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/blob/dev/src/MyCompanyName.AbpZeroTemplate.Web/App/common/directives/roleCombo.cshtml">https://github.com/aspnetzero/aspnet-ze ... mbo.cshtml</a> <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero/blob/dev/src/MyCompanyName.AbpZeroTemplate.Web/App/common/directives/roleCombo.js">https://github.com/aspnetzero/aspnet-ze ... leCombo.js</a>
-
0
Thanks Ismail. I am following your code to see how it was done.
I noticed that you use the role-combo as follows:
<role-combo selected-role="vm.requestParams.role" empty-text="@L("FilterByRole")"></role-combo>Is there a reason why ng-model was not used? I am trying to make use of ng-model and getting so many weird issues when I use also "replace:true". As if 2 models are bound to the same field.
Thanks
-
0
Hi,
I don't remember very well but probably we had problems with ng-model too :). Using "replace:true" is not good I think, in that case using multiple instance of same directive in same page causes problems as well.
-
0
Thanks a lot for the help :)
