element.replaceWith в AngularJS директиве

Question

Я прошел через результаты поиска по этому вопросу, но ни одно из решений не работает.

У меня есть директива:

app.directive('pdf', function($compile) { 
    return { 
      restrict: 'E', 
      scope: {filelocation: '='}, 
      link: function(scope, element, attrs) { 

      var html = ""; 
      html = '<object type="application/pdf" data="http://someurl/' + scope.filelocation + '"></object>'; 

      element.replaceWith($compile(html)(scope)); 

      var currentElement = element; 

      scope.$watch('filelocation', function(newValue, oldValue) 
      { 
       console.log("Changed!"); 
       var html = ""; 
       html = '<object type="application/pdf" data="http://someurl/' + scope.filelocation + '"></object>'; 

       var replacementElement = $compile(html)(scope); 
       currentElement.replaceWith(replacementElement); 
       currentElement = replacementElement; 
      }, true); 
      } 
     }; 
    }); 

в $ часы срабатывает, когда изменения filelocation - но сама PDF не обновляется.

У кого-нибудь есть идеи?

Спасибо! :)

Answer 1

Вам необходимо очистить элемент и использовать функцию пересылки $compile, чтобы добавить замену html.

angular.module("myApp").directive('pdf', function($compile) { 
    function newHtml(scope) { 
     return '<object type="application/pdf" '+ 
       'data="http://someurl/'+ 
       scope.filelocation+ 
       '"></object>'; 
    } 
    function replaceHtml(scope, element, html) { 
     var replaceLinkFn = $compile(html); 
     element.empty(); 
     replaceLinkFn(
      scope, 
      function transclude(clone) { 
       element.append(clone); 
      }, 
      {futureParentElement: element} 
     ); 
    }; 
    function linkFn(scope, element, attrs) {  
     scope.$watch(
      'filelocation', 
      function(newValue) { 
       console.log("Changed!"); 
       var jhtml = newHtml(scope); 
       replaceHtml(scope, element, jhtml); 
      }, 
      true 
     ); 
    }; 
    return { 
      restrict: 'E', 
      scope: {filelocation: '='}, 
      link: linkFn 
      } 
}); 

DEMO on JSFiddle.