Angular에서 요소를 교체하는 방법JS 다이렉트 링크 함수?

Angular에서 요소를 교체하는 방법JS 다이렉트 링크 함수?

작성 중입니다.<row>각진자신을 치환할 필요가 있다JS 디렉티브(the JS Directive)<row>실행 후 DOM에 HTML 코드를 포함할 수 있는 동적 템플릿이 있는 태그가 없어야 합니다.

사용상의 문제replace: true테이블과 함께 사용할 수 없습니다.<tr>템플릿이 동적으로 선택되었는지 확인합니다.

그래서 저는 링크 기능에서 요소를 교체하는 방법을 찾고 있지만 성공하지 못하고 있습니다.

jQuery의 사용.replaceWith()부서지다ngRepeat알 수 없는 이유로

힌트 있나요?

여기 바이올린이 있습니다.

마크의 대답은 효과가 있지만, 그 예는 전체 그림을 보여주기에는 너무 제한적이다.Mark의 지시는 공통적이고 단순한 UI 컴포넌트에는 충분하지만, 보다 복잡한 조작에는 이 패턴을 피해야 합니다.이하, 그 이유를 자세하게 설명합니다.실제로 Angular는 지시 요소를 템플릿으로 대체하는 훨씬 더 간단한 방법을 제공합니다.이 답변의 아래쪽에 있습니다.

배경에는 다음과 같은 지침이 있습니다.

.directive('row', function ($compile) {
  return {
      restrict: 'E',
      scope: {
          items: "="
      },

      // Whether you define it this way or not, this is the order of
      // operation (execution) behind every AngularJS directive.
      // When you use the more simple syntax, Angular actually generates this
      // structure for you (this is done by the $compile service):

      compile: function CompilingFunction($templateElement, $templateAttributes, transcludeFn) {

        // The compile function hooks you up into the DOM before any scope is
        // applied onto the template. It allows you to read attributes from
        // the directive expression (i.e. tag name, attribute, class name or
        // comment) and manipulate the DOM (and only the DOM) as you wish.

        // When you let Angular generate this portion for you, it basically
        // appends your template into the DOM, and then some ("some" includes
        // the transclude operation, but that's out of the $scope of my answer ;) )

          return function LinkingFunction($scope, $element, $attrs) {

            // The link function is usually what we become familiar with when
            // starting to learn how to use directives. It gets fired after
            // the template has been compiled, providing you a space to
            // manipulate the directive's scope as well as DOM elements.

            var html ='<div ng-repeat="item in items">I should not be red</div>';
            var e = $compile(html)($scope);
            $element.replaceWith(e);
          };
      }
  };
});

그걸로 뭘 얻을 수 있을까요?그렇다면, 수동으로 전화를 걸어야 한다는 것은 명백합니다.$compile같은 DOM 레이아웃을 2회 사용하는 것은 중복성이 있어 퍼포먼스나 치아에도 악영향을 미칩니다.대신 어떻게 해야 할까요?컴파일할 곳의 DOM을 컴파일하기만 하면 됩니다.

.directive('row', function ($compile) {
  return {
      restrict: 'E',
      template: '<div ng-repeat="item in items">I should not be red</div>',
      scope: {
          items: "="
      },

      compile: function CompilingFunction($templateElement, $templateAttributes) {
          $templateElement.replaceWith(this.template);

          return function LinkingFunction($scope, $element, $attrs) {
            // play with the $scope here, if you need too.
          };
      }
  };
});

---

만약 당신이 지시문 아래에 더 깊이 들어가고 싶다면, 여기 내가 비공식적인 각도라고 부르는 것이 있다.JS 지시 참조

이 헤드가 끝나면http://https://github.com/angular/angular.js/wiki/Understanding-Directives 를 참조해 주세요.

---

약속대로, 여기 오신 솔루션은 다음과 같습니다.

사용.replace: true:

.directive('row', function ($compile) {
    return {
        restrict: 'E',
        template: '<div ng-repeat="item in items">I should not be red</div>',
        replace: true,
        scope: {
            items: "="
        }
    };
});

바이올린은 기본적인 것 같지만 그냥 쓸 수 있을 거예요.outerHTML

element[0].outerHTML ='<div>I should not be red</div>';

업데이트된 바이올린

이 문제를 해결해야 한다면ng-repeat항목을 범위 속성에 바인딩하고 컴파일한 템플릿에서 참조할 수 있습니다.컴파일되면 jQuery를 사용할 수 있습니다.replaceWith()

html

<row items="items">***</row>

지시의

.directive('row', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            items: "="
        },
        link: function (scope, element, attrs) {
            var html ='<div ng-repeat="item in items">I should not be red</div>';
            var e =$compile(html)(scope);
            element.replaceWith(e);
        }
    };
});

ng-repeat예

언급URL : https://stackoverflow.com/questions/17090964/how-to-replace-an-element-in-angularjs-directive-linking-function