用户输入不会在指令模板中重复/显示

Question

当用户输入输入时，为什么用户输入的值不重复？

当 HTML 与自定义指令模板分开时，用户输入有效并重复，如下所示，在这个小提琴中：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>

但是，我尝试使用两个不同的指令模板插入它，如下所示：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>

为什么第二个示例中的值没有重复，您会建议比这更好的做法吗？

Answer 1

我相信您正在经历范围分离。您的指令与您的控制器具有不同的范围，因此它什么都不知道。尝试注入您的根范围或范围，例如myApp.directive('leaseInputDirective', function($rootScope, $scope)

现在可以使用了

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>