지시문이 내가 원하는대로 작동하지 않습니다. - AngularJS

Question

부모 지시문 컨트롤러를 통해 서로 통신하는 두 개의 사용자 지정 지시문, 하나의 parent 지시문 및 하나의 child 지시문을 만들었습니다.

---

학부모 지침

app.directive('attrsCtrl', function ($compile) { 
return { 
    restrict: 'E', 
    scope: { 
     attributes: '=array', 
     options: '=' 
    }, 
    controller: function ($scope, $element) { 
     $scope.attributes = []; 

     this.returnOptions = function(){ 
      return $scope.options; 
     } 

     this.saySomething = function (obj) { 
      $scope.attributes.push(obj); 
      alert(obj.name + "/" + obj.type.name); 

      var newDirective = angular.element('<attributes> </attributes>'); 
      $element.append(newDirective); 
      $compile(newDirective)($scope); 
     } 
    } 
}}) 

---

아이 지침

app.directive('attributes', function ($compile) { 
return { 
    restrict: 'E', 
    require: '^attrsCtrl', 
    template: '<div ng-class="classInput">' + 
     ' <div class="col-md-6" style="padding-left: 0;">' + 
     '  <label>Nome do Atributo</label>' + 
     '  <input type="text" class="form-control input-sm" placeholder="Nome do Atributo" ng-model="attrname" ng-change="validation()" ng-disabled="afterSend">' + 
     ' </div>' + 
     ' <div class="col-md-4 " style="padding-left: 0;"> ' + 
     '  <label>Tipo do Atributo</label> ' + 
     '   <select class="form-control input-sm" ng-options="option.name for option in options" ng-model="attrtype" ng-disabled="afterSend"></select>' + 
     ' </div> ' + 
     ' <div class="col-md-2" style="padding-right: 0;"> ' + 
     ' <label> </label>' + 
     '   <button type="button" class=" btn btn-default pull-right" ng-click="changeButton()" style="margin-top: 1em;" ng-disabled="disabled"> Adicionar </button>' + 
     ' </div> ' + 
     '</div>' + 
     '<div class="clearfix></div>', 

    link: function (scope, element, attrs, attrsCtrl) { 
     scope.classInput = 'form-group'; 
     scope.disabled = true; 
     scope.afterSend = false; 
     scope.options = attrsCtrl.returnOptions(); 


     scope.changeButton = function() { 
      scope.attr = { 
       name: scope.attrname, 
       type: scope.attrtype 
      }; 
      attrsCtrl.saySomething(scope.attr); 
      scope.disabled = true; 
      scope.afterSend = true; 
     } 

     scope.validation = function() { 
      if (scope.attrname.length < 6) { 
       scope.classInput = 'form-group has-error'; 
      } else { 
       scope.classInput = 'form-group has-success'; 
       scope.disabled = false; 
      } 
     } 

    } 
};}) 

---

HTML

<attrs-ctrl array="myAttributes" options="options" > 
      <attributes/> 
</attrs-ctrl> 

내 문제는 지시문을 만들기 위해 두 번 클릭하면 자동으로 다른 지시문이 만들어 지지만 아무 것도 입력 할 수 없다는 것입니다. 이 동작은 "Adicionar"버튼을 클릭해야만 발생합니다.

Answer 1

는 위의 예에서 여기

1. 두 가지 문제가있다, link 기능은 scope.disabled = true;, scope.disabled = false;에 내가 여기에 예를 붙여 동안 당신의 오타 것 같다 변경해야합니다 포함되어 있습니다.

2. 두 번째로 독립 자식 지시문을 만들려고 할 때 명시 적으로 부모 지시문 종속성을 추가했다고 생각합니다. 코드에 따라 부모와 자식 지시어 사이의 범위가 공유됩니다. 따라서 모든 하위 지시문에서 상위 디렉티브의 범위가 공유되며 모든 필드는 사용할 수 없게 표시됩니다.

아래로 지시 기능에 scope:{}, 추가

... 이 별도의 자식 지시 scope을 생성합니다.

멋진 세부 범위를 설명하는 기사가있다 : https://github.com/angular/angular.js/wiki/Understanding-Scopes

app.directive('attributes', function ($compile) { 
return { 
    restrict: 'E', 
    require: '^attrsCtrl', 
    scope: {}, 
    template: '<div ng-class="classInput">' + 
     ' <div class="col-md-6" style="padding-left: 0;">' + 
     '  <label>Nome do Atributo</label>' + 
     '  <input type="text" class="form-control input-sm" placeholder="Nome do Atributo" ng-model="attrname" ng-change="validation()" ng-disabled="afterSend">' + 
     ' </div>' + 
     ' <div class="col-md-4 " style="padding-left: 0;"> ' + 
     '  <label>Tipo do Atributo</label> ' + 
     '   <select class="form-control input-sm" ng-options="option.name for option in options" ng-model="attrtype" ng-disabled="afterSend"></select>' + 
     ' </div> ' + 
     ' <div class="col-md-2" style="padding-right: 0;"> ' + 
     ' <label> </label>' + 
     '   <button type="button" class=" btn btn-default pull-right" ng-click="changeButton()" style="margin-top: 1em;" ng-disabled="disabled"> Adicionar </button>' + 
     ' </div> ' + 
     '</div>' + 
     '<div class="clearfix></div>', 

    link: function (scope, element, attrs, attrsCtrl) { 
     scope.classInput = 'form-group'; 
     scope.disabled = false; 
     scope.afterSend = false; 
     scope.options = attrsCtrl.returnOptions(); 


     scope.changeButton = function() { 
      scope.attr = { 
       name: scope.attrname, 
       type: scope.attrtype 
      }; 
      attrsCtrl.saySomething(scope.attr); 
      scope.disabled = true; 
      scope.afterSend = true; 
     } 

     scope.validation = function() { 
      console.log("validate"); 
      if (scope.attrname.length < 6) { 
       scope.classInput = 'form-group has-error'; 
      } else { 
       scope.classInput = 'form-group has-success'; 
       scope.disabled = false; 
      } 
     } 
    } 
};})