góc ng-bind-html và chỉ thị bên trong nó

Liên kết Plunker

Tôi có một phần tử mà tôi muốn liên kết html với nó.

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

Điều đó hoạt động. Bây giờ, cùng với nó, tôi cũng có một chỉ thị được liên kết với html bị ràng buộc:

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

Nhưng chỉ thị uppervới div và anchor không đánh giá. Làm cách nào để làm cho nó hoạt động?

Tôi cũng đang đối mặt với vấn đề này và sau hàng giờ tìm kiếm trên internet, tôi đã đọc được bình luận của @ Chandermani, được chứng minh là giải pháp. Bạn cần gọi một chỉ thị 'biên dịch' với mẫu này:

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);
            }
        );
    };
}])

Bạn có thể xem một cách làm việc của nó ở đây

Cảm ơn câu trả lời tuyệt vời vkammerer. Một tối ưu hóa mà tôi muốn giới thiệu là hủy xem sau khi quá trình biên dịch chạy một lần. $ Eval trong biểu thức đồng hồ có thể có ý nghĩa về hiệu suất.

    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();
            }
        );
    };
}]);

Đây là một trò chơi được phân nhánh và cập nhật.

Thêm chỉ thị này 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);
      });
    }
  };
}]);

Sử dụng nó như thế này:

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

Thật sự dễ dàng :)

Thật không may, tôi không có đủ danh tiếng để bình luận.

Tôi không thể làm cho điều này để làm việc cho nhiều tuổi. Tôi đã sửa đổi ng-bind-htmlmã của mình để sử dụng chỉ thị tùy chỉnh này, nhưng tôi không xóa $scope.html = $sce.trustAsHtml($scope.html)được lệnh bắt buộc để ng-bind-html hoạt động. Ngay sau khi tôi loại bỏ điều này, chức năng biên dịch bắt đầu hoạt động.

Đối với bất kỳ ai xử lý nội dung đã được chạy qua $sce.trustAsHtmlđây là điều tôi phải làm khác đi

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();
        });
}

Đây chỉ là một linkphần của chỉ thị vì tôi đang sử dụng một bố cục khác. Bạn cũng sẽ cần phải tiêm $scedịch vụ $compile.

Giải pháp tốt nhất mà tôi đã tìm thấy! Tôi đã sao chép nó và nó hoạt động chính xác như tôi cần. Cảm ơn cảm ơn cảm ơn ...

trong chức năng liên kết chỉ thị tôi có

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

và trong mẫu chỉ thị:

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