CODEWITHSUNDEEP
angularjs
Noah Kettler
Noah Kettler

Reputation: 109

User Input won't duplicate/display in directive template

Why are the user inputted values not duplicating when a user types into an input?

The user input works and duplicates when the HTML is separate from a custom directive template as shown below and in this fiddle: http://jsfiddle.net/Lvc0u55v/7069/ .

<div ng-controller="LeaseTemplateController">
  <div class="leasespecial">
    <div class="firstsec">
      <div class="percNumber">
        <h1 id="perId" ng-repeat="bb in percent_id">{{bb.value}}</h1>
      </div>
  </div>

  <h2>Lease Special Template</h2>
  <form>
    <div class="form-group" ng-repeat="cc in percent_id">
      <div class="input-group">
        <input class="form-control input" type="text" placeholder="Enter Percent" ng-model="cc.value">
      </div>
    </div>
  </form>

</div>
<script>
var myApp = angular.module('myApp', []);

myApp.controller('LeaseTemplateController', ['$scope', function($scope) {
  //Lease Special Template
  $scope.percent_id = [{
    value: '20'
  }];
}]);
</script>

However, instead I'm trying to insert it using two different directive templates as shown in this fiddle: http://jsfiddle.net/Lvc0u55v/7068/ 

<div lease-text-directive>
</div>
<div lease-input-directive>
</div>


<script>  
var myApp = angular.module('myApp', []);

myApp.controller('LeaseTemplateController', ['$scope', function($scope) {
  //Lease Special Template
  $scope.percent_id = [{
    value: '20'
  }];
}]);

myApp.directive('leaseTextDirective', function() {
  return {
    restrict: 'A',
    template: '<div class="leasespecial" ng-controller="LeaseTemplateController">\
                <div class="firstsec">\
                      <div class="percNumber">\
                        <h1 id="perId" ng-repeat="bb in percent_id">{{bb.value}}</h1>\
                      </div>\
                </div>'
  };
});
myApp.directive('leaseInputDirective', function() {
  return {
    restrict: 'A',
    template: '<h2>Lease Special Template</h2>\
        <form ng-controller="LeaseTemplateController">\
          <div class="form-group" ng-repeat="cc in percent_id">\
            <div class="input-group">\
              <input class="form-control input" type="text" placeholder="Enter Percent" ng-model="cc.value">\
            </div>\
          </div>\
        </form>'
  };
});
</script>

Why are the values not duplicating over in the second example and would you suggest a better practice than this?

Upvotes: 0

Views: 51

Answers (1)

Robert Cadmire
Robert Cadmire

Reputation: 190

I believe your experiencing the separation of scopes. Your directives have a different scope than your controller so it knows nothing. Try injecting your rootscope or scope like myApp.directive('leaseInputDirective', function($rootScope, $scope)

got it working now

var myApp = angular.module('myApp', []);

myApp.controller('LeaseTemplateController', function($scope,$rootScope) {
  //Lease Special Template
  $rootScope.percent_id = [{
    value: '20'
  }];
});

myApp.directive('leaseTextDirective', function() {
  return {
    restrict: 'E',
     replace: true, // Replace with the template below
	    transclude: true, // we want to insert custom content inside the directive
      
    template: '<div class="leasespecial" ng-controller="LeaseTemplateController">\
				<div class="firstsec">\
		              <div class="percNumber">\
		                <h1 id="perId" ng-repeat="bb in percent_id">{{bb.value}}</h1>\
		              </div>\
	            </div>'
  };
});
myApp.directive('leaseInputDirective', function() {
  return {
    restrict: 'E',
     replace: true, // Replace with the template below
	    transclude: true, // we want to insert custom content inside the directive
    template: '<div><h2>Lease Special Template</h2>\
        <form ng-controller="LeaseTemplateController">\
          <div class="form-group" ng-repeat="cc in percent_id">\
            <div class="input-group">\
              <input class="form-control input" type="text" placeholder="Enter Percent" ng-model="cc.value">\
            </div>\
          </div>\
        </form></div>'
  };
});
<lease-text-directive>
</lease-text-directive>
<!-- leaseTextDirective -->
<lease-input-directive>
</lease-input-directive>

Upvotes: 1

Related Questions