Angular Directive generated input element not displaying value

Question

I have created a directive which allows me to reproduce some HTML which includes an input field. The problem is when the input is rendered the value field is populated with the value from the scope but for some reason is not being displayed.

Not working in Chrome, Firefox or MS Edge. You can have a look at this Plunkr

HTML:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-directive-simple-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="docsSimpleDirective">
     <div ng-controller="Controller">
         <form-input i-scope="customer" e-scope="errors" model="customer.name" name="name"></form-input>
     </div>
</body>
</html>

JS

(function(angular) {
'use strict';
angular.module('docsSimpleDirective', [])
.controller('Controller', ['$scope', function($scope) {
$scope.customer = {
  name: 'Naomi',
  address: '1600 Amphitheatre'
};
$scope.errors = {name:"name is required"};
}])
.directive('formInput', function () {
    return {
      restrict: "E",
      scope: {
        formInfo:'=iScope',
        errors:'=eScope'
      },
      replace:true,
      template: function(elem,attr){
        return '<div><input type="text" name="' + attr.name + '" id="' + attr.name + '" ng-model="' + attr.model + '" value="{{ formInfo.' + attr.name + '}}" /><span ng-cloak ng-show="errors.' + attr.name + '">{{ errors.' + attr.name + ' }}</span></div>';
      }
    };
  });
})(window.angular);

UPDATE Please have a look at the Plunkr as the code is now updated to show the true issue, the basic example was solved using ng-value as mentioned by @Stefan.B but does not solve the original problem

hdev · Accepted Answer · 2016-08-04 19:49:04Z

1

You shouldn't pass directly the full object of the scope,

controller: $scope.customer = { ... }

view: i-scope="customer"

instead you should pass the object properties:

controller: $scope.customer = { customer: { /*same as above */ };

view: i-scope="customer.customer"

or:

controller: $scope.customer = { ... }

view: i-scope-name="customer.name" i-scope-address="customer.address"

would do the trick.

Explanation here: https://github.com/angular/angular.js/wiki/Understanding-Scopes

answered Aug 4, 2016 at 19:49

hdev

4721 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stefan.B · Accepted Answer · 2016-08-04 18:10:16Z

0

You can change value with ng-value in your template.
return "<div><input type='text' name="+ attr.name + " id=" + attr.name + " ng-model=" + attr.model + " ng-value=formInfo." + attr.name + " /><span ng-cloak ng-show='errors." + attr.name + "'>{{ errors." + attr.name + "}}</span></div>";

answered Aug 4, 2016 at 18:10

Stefan.B

1461 silver badge5 bronze badges

1 Comment

B Days Over a year ago

Applying this to the plunker makes it work, but applying it to the project doesn't for some reason. The value is coming back in the value field but not showing on the browser input field for the user. Any other ideas? I will update the plunker to try to replicate this exactly

Collectives™ on Stack Overflow

Angular Directive generated input element not displaying value

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related