B Days B Days - 1 year ago 100
AngularJS Question

Angular Directive generated input element not displaying value

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


<!doctype html>
<html lang="en">
<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>
<body ng-app="docsSimpleDirective">
<div ng-controller="Controller">
<form-input i-scope="customer" e-scope="errors" model="customer.name" name="name"></form-input>


(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: {
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>';

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

Answer Source

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"


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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download