AngularJsngIf로 인해 지시문 내부의 요소를 찾을 수 없습니다.

AngularJsngIf로 인해 지시문 내부의 요소를 찾을 수 없습니다.

나는 각진 것이 있습니다.하는 JS를 ngIf의 다 .ngIf명령 링크 함수에서.스럽게도인 것 .ngIf링크 함수에서 DOM 요소를 찾을 수 없습니다.

다음은 지침에 대한 코드입니다.

directive('column', function () {
    return {
      templateUrl: 'views/column.html',
      restrict: 'E',
      scope: {
        column: '='
      },
      controller: ['$scope', function ($scope) {

        $scope.editing = true;
        $scope.toggleEditing = function () {
          $scope.editing = !$scope.editing;
        };

      }],
      link: function postLink(scope, element) {
        var select = element.find('select');
        console.log(select); // See if it can find the select element
        // var types = scope.column.types();
        // add types as options to the select element
      }
    };
  });

다음은 이 명령의 단순화된 html입니다.

<div class="column">
    <div>{{ column.title }}</div>
    <form name="columnForm" role="form" ng-if="editing">
        <select></select>
    </form>
</div>

다음은 jsFiddle 예제 http://jsfiddle.net/dedalusj/Y49Xx/1/ 에 대한 링크입니다.

element.find빈ngIf양식에서 적절한 선택 DOM 요소를 반환합니다.제가 잘못된 방식으로 하고 있다는 느낌이 듭니다.

갱신하다

답변 감사하지만 다른 해결책을 찾았습니다.입니다.column:hng-if="editing".

에 됩니다 합니다.column 및 수 .select요소가 DOM 트리 안에 있기 때문입니다. 지시 $timeouthack. http://jsfiddle.net/dedalusj/nx3vX/1/ 솔루션을 설명하기 위해 새로운 jsFiddle을 만들었습니다.

@Michael 라는 요를 .ng-optiontypes하며, 이며,은 XML며입니다에서는 할 수 .ng-option.

ngIf명령은 Angular의 트랜스클루전 피쳐를 사용하여 작동합니다.일/다입니다.

1. 안에 ngIf시 DOM됩니다를 됩니다.
2. Angular는 링크 함수를 실행합니다.ngIf의 링크 기능은 그것을 사용하는 지시어의 링크 기능보다 먼저 실행됩니다..ngIf되고, 됩니다를 $scope.$watch()ng-if기여하다.
3. 이 에서 , 즉ngIfDOMDOM.
4. (2) 하고,ngIf그 다음에 전화할 것입니다.$transclude능의 .ngIf합니다.ng-if속성 값이 참입니다.
5. 뭐든지$timeout$scope.$evalAsync명령의 링크 함수에 등록한 것이 실행됩니다.

그래서 만약 당신이 내부의 요소들에 접근하기를 원한다면ngIf내용은 위의 4단계 이후에 코드를 실행해야 합니다.이것은 다음과 같이 등록된 모든 기능이$scope.$watch,$timeout아니면$scope.$evalAsync명령의 링크 기능이 작동합니다.일회용 설정 코드의 경우, 저는 아마도 다음을 선택할 것입니다.$scope.$evalAsync:

angular.directive('yourDirective', function () {
  return {
    ...
    link: function(scope, elem) {
      scope.$evalAsync(function () {
        // code that runs after conditional content
        // with ng-if has been added to DOM, if the ng-if
        // is enabled
      });
    }
  };
});

degree가 @modern degree ,ngIfDOM에서 적용된 요소를 제거하므로 해당 요소가 없을 때는 찾을 수 없습니다.그러나 다음과 같은 방법으로 지침을 작성할 수 있습니다.

controller: function ($scope, $element, $timeout) {
  $scope.toggleEditing = function () {
    $scope.editing = !$scope.editing;
    $timeout(function() {
      var select = $element.find('select');
      select.append('<option>Value 1</option>')
            .append('<option>Value 2</option>')
            .append('<option>Value 3</option>');
    });            
  };
}

jsFiddle 업데이트했습니다.

여기서의 요령은 시간을 늦추는 것입니다.find()$timeoutAngular가 DOM을 업데이트할 때까지 기다리려면 0 간격으로 합니다.

갱신하다

당신의 코드에 대해 좀 더 생각해본 후에, 당신이 Angular가 당신을 위해 힘든 일을 하도록 할 수 있다는 것을 알게 되었습니다.

자바스크립트

directive('column', function () {
  return {
    templateUrl: 'views/column.html',
    restrict: 'E',
    scope: {
      column: '='
    },
    controller: ['$scope', function ($scope) {
      $scope.editing = true;
      $scope.toggleEditing = function () {
        $scope.editing = !$scope.editing;
      };
    }],
  };
});

HTML

<div class="column">
  <div>{{ column.title }}</div>
  <form name="columnForm" role="form" ng-if="editing">
    <select ng-model="type" ng-options="type for type in column.types"></select>
  </form>
</div>

jsFiddle

은 를 찾는 것에 걱정할가 없습니다.select적절한 시기에 요소를 채워 넣을 수 있습니다.각도가 당신을 위해 모든 것을 해줍니다.:)

링크 기능에서 코드를 $timeout 안에 넣으면 됩니다.

$timeout(function(){
     var select = element.find('select');
     console.log(select);
});

지침에 $timeout을 주입하는 것을 잊지 마십시오.

directive('column', function ($timeout) {

나는 이와 같은 문제에 직면해 있었고 ng-show를 사용하여 해결할 수 있었습니다. 이것은 ngIf가 DOM에 적용되는 요소를 제거하면 해당 요소가 없을 때 찾을 수 없기 때문에 이 문제를 방지합니다.

그래서 당신의 경우:

<div class="column">
<div>{{ column.title }}</div>
<form name="columnForm" role="form" ng-show="editing">
    <select></select>
</form>

잘 될 겁니다.

건배.

언급URL : https://stackoverflow.com/questions/21541276/angularjs-ngif-prevents-finding-element-inside-directive