I get this problem since long time, but I just ignored it so far. This is working code:
<div ng-show="!cs.isEditing">{{cs.refCompound.name}}</div><select ng-show="cs.isEditing" ng-model="cs.refCompound" ng-options="g.name for g in method.refCompoundList"><option value=""></option></select>
Now, I'm trying to convert this into a directive as:
app.directive('msSelectCell', function () {
return {
restrict: 'EA',
replace: true,
scope: {
name: '=',
isEditing: '=',
isHidden: '=',
options: '=',
model: '='
},
template:
'<div>' +
' <div ng-hide="!isHidden" style="background-color: lightgrey"> </div>' +
' <div ng-show="!isEditing && !isHidden">{{name}}</div>' +
' <select class="select-input" ng-show="isEditing && !isHidden" ng-model="model" ng-options="g.name || g for g in options"><option value=""></option></select>' +
'</div>'
}
});
This directive is working fine for all other cases, except one like this:
<ms-select-cell name="cs.refCompound.name" is-editing="cs.isEditing" options="method.refCompoundList" model="cs.refCompound" is-hidden="cs.useAsRtRef"/>
As I figured out, it is because 'refCompoundList' is an extended property of method as defined:
Object.defineProperty(Method.prototype, 'refCompoundList', {
get: function () {
var list = [];
this.compoundSettings.forEach(function (cs) {
if (cs.useAsRtRef)
list.push(cs.compound);
});
return list;
}
});
So, I don't understand why method.refCompound is working fine outside the directive, but I got this error when it is passed into a directive only?
UPDATE: Okay, I tried to create a plunker at here, but it's not fully working as I desire. I need to make the select options to use an extended property that is dynamically populated, and I don't know how to do it in plunker. Hope somebody can fix it for me. It's now using the sexes array from scope which is not a problem.
