각 ng-sig-sig-internal 및 그 내에서의 지시

각 ng-sig-sig-internal 및 그 내에서의 지시

플런커 링크

html을 바인드하고 싶은 요소가 있습니다.

<div ng-bind-html="details" upper></div>

됐다.이와 함께 바인딩된 html에 바인딩된 명령도 있습니다.

$scope.details = 'Success! <a href="#/details/12" upper>details</a>'

하지만 지시는upperdiv와 앵커를 사용하여 평가하지 않습니다.어떻게 하면 될까요?

저도 이 문제에 직면해 있었기 때문에, 몇시간 후에 인터넷을 검색한 후에 @Chandermani의 코멘트를 읽었습니다.그것이 해결책으로 판명되었습니다.다음 패턴의 '컴파일' 디렉티브를 호출해야 합니다.

HTML:

<div compile="details"></div>

JS:

.directive('compile', ['$compile', function ($compile) {
    return function(scope, element, attrs) {
        scope.$watch(
            function(scope) {
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            },
            function(value) {
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
}])

여기서 작동 중인 바이올린을 볼 수 있습니다.

vkammerer에 대한 훌륭한 답변 감사합니다.컴파일을 한 번 실행한 후 워치를 해제하는 것이 좋습니다.워치 표현식 내의 $eval은 퍼포먼스에 영향을 줄 수 있습니다.

    angular.module('vkApp')
  .directive('compile', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
          var ensureCompileRunsOnce = scope.$watch(
            function(scope) {
               // watch the 'compile' expression for changes
              return scope.$eval(attrs.compile);
            },
            function(value) {
              // when the 'compile' expression changes
              // assign it into the current DOM
              element.html(value);

              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);

              // Use un-watch feature to ensure compilation happens only once.
              ensureCompileRunsOnce();
            }
        );
    };
}]);

여기 포크형 바이올린과 최신 바이올린이 있습니다.

이 지시어 angle-bind-html-compile을 추가합니다.

.directive('bindHtmlCompile', ['$compile', function ($compile) {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      scope.$watch(function () {
        return scope.$eval(attrs.bindHtmlCompile);
      }, function (value) {
        // Incase value is a TrustedValueHolderType, sometimes it
        // needs to be explicitly called into a string in order to
        // get the HTML string.
        element.html(value && value.toString());
        // If scope is provided use it, otherwise use parent scope
        var compileScope = scope;
        if (attrs.bindHtmlScope) {
          compileScope = scope.$eval(attrs.bindHtmlScope);
        }
        $compile(element.contents())(compileScope);
      });
    }
  };
}]);

다음과 같이 사용합니다.

<div bind-html-compile="data.content"></div>

매우 간단:)

불행하게도 나는 논평할 만한 충분한 평판이 없다.

나는 오랫동안 이것을 작동시킬 수 없었다.수정했습니다.ng-bind-html이 커스텀 디렉티브를 사용하기 위한 코드입니다만, 이 커스텀 디렉티브를 삭제하지 못했습니다.$scope.html = $sce.trustAsHtml($scope.html)ng-syslog가 작동하기 위해 필요한 것입니다.이것을 제거하자 마자 컴파일 기능이 작동하기 시작했습니다.

이미 훑어본 내용을 다루는 모든 사용자용$sce.trustAsHtml여기 내가 다르게 해야 했던 것이 있다.

function(scope, element, attrs) {
    var ensureCompileRunsOnce = scope.$watch(function(scope) {
            return $sce.parseAsHtml(attrs.compile)(scope);
        },
        function(value) {
            // when the parsed expression changes assign it into the current DOM
            element.html(value);

            // compile the new DOM and link it to the current scope.
            $compile(element.contents())(scope);

            // Use un-watch feature to ensure compilation happens only once.
            ensureCompileRunsOnce();
        });
}

이것은 단지link다른 레이아웃을 사용하고 있기 때문에 지시문의 일부입니다.주사할 필요가 있습니다.$sce서비스뿐만 아니라$compile.

내가 찾은 최고의 해결책!복사해 놨는데 내가 원하는 대로 작동해.고마워, 고마워, 고마워...

내가 가진 다이렉트 링크 함수

app.directive('element',function($compile){
  .
  .
     var addXml = function(){
     var el = $compile('<xml-definitions definitions="definitions" />')($scope);
     $scope.renderingElement = el.html();
     }
  .
  .

및 지시 템플릿:

<span compile="renderingElement"></span>

언급URL : https://stackoverflow.com/questions/17417607/angular-ng-bind-html-and-directive-within-it