User Input won't duplicate/display in directive template

Question

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?

Robert Cadmire · Accepted Answer · 2016-07-19T01:39:24.287

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>

I was thinking the same thing except when I inject $rootscope, $scope in the directives exactly how you stated, I receive a $scopeProvider error. — Noah Kettler, Jul 18 '16 at 21:33
Awesome thanks very much. By any chance why would replacing an element with an attribute be any different? http://stackoverflow.com/questions/23220976/angularjs-directive-restrict-a-vs-e says you can even use EA — Noah Kettler, Jul 19 '16 at 14:32
i just used an example of a template in a directive that i had working, it may work with 'A' but i didn't experiment with that. I believe the replace and transclude properties were the biggest difference along with using custom html elements instead of
s — Robert Cadmire, Jul 19 '16 at 14:36

User Input won't duplicate/display in directive template

1 Answers1