So I am trying to write an AngularJS (version 1.4.8) directive which outputs the value of an attribute in an input box. The directive looks like this:
(function () {
angular.module("myApp").directive("inputAttributeDirective", function () {
return {
templateUrl: "inputAttributeTemplate.html",
// The directive is a custom element
restrict: "E",
// Declare the scope of the directive as isolated
scope: {
attribute: "=",
value: "="
}
}
});
})();
And the HTML template for it is the following (that's in inputAttributeTemplate.html):
<label id="AttributeLabel" class="control-label">{{ attribute }}</label>
<div id="AttributeInput" class="input-prepend">
<input id="attributeName" name="attributeName" class="form-control input-large" type="text" ng-model="value"/>
</div>
Where 'attribute' and 'value' correspond to the attributes of an object called 'Client' that looks like this:
vm.client = { name: "Some Client", description: "This is a cool client", networkPath: "network path 1", active: "1" }
So basically, a Client has four attributes, name, description, networkPath, and active.
And the way I am including the directive is like so (this is in the parent HTML file):
<div class="panel-body">
<div ng-repeat="(key, value) in vm.client">
<incident-attribute-directive attribute="key" value="value"></incident-attribute-directive>
</div>
</div>
The problem is that, while it does display the attributes correctly, they are read-only and I need them to be editable:
Any idea why they are read-only?
incident-attribute-directive
vsinputAttributeDirective
– Ronnie Dec 12 '16 at 19:56