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

当文件位置发生变化时，$ watch会触发 - 但pdf本身并不会更新。

有没有人有任何想法？

谢谢！：）

Answer 1

您需要清空元素并使用$compile transclude函数附加替换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。

AngularJS指令中的element.replaceWith

1 个答案: