각도 ng-bind-html 및 지시문

플 런커 링크

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

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

작동합니다. 이제 그와 함께 바인딩 된 html에 바인딩 된 지시문도 있습니다.

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

그러나 upperdiv 및 anchor가 있는 지시문 은 평가되지 않습니다. 어떻게 작동합니까?

나는 또한이 문제에 직면하고 인터넷을 검색 한 후 @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에 감사드립니다. 내가 권장하는 최적화 중 하나는 컴파일이 한 번 실행 된 후 감시 해제하는 것입니다. watch 표현식 내의 $ 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();
            }
        );
    };
}]);

다음은 분기되고 업데이트 된 바이올린입니다.

이 지시문 angular-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-bind-html이 작동하는 데 필요한 코드를 제거하지 못했습니다 . 이것을 제거하자마자 컴파일 기능이 작동하기 시작했습니다.

이미 $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>