角型jsがsvg要素内に画像タグをレンダリングしていません

Question

角度jを動的に使用してインラインsvg内に画像を追加しようとしています。以下のコードを見つけてください。

<svg id="deviceSelect" ng-if="$ctrl.src" class="device-mapper" width="100%" ng-attr-height="{{$ctrl.height + 20}}"> 
    <rect x="0" y="0" width="100%" height="100%" fill="#f1f1f1"></rect> 
    <g transform = "translate(10,10)"> 
     <image x="0" y="0" xlink:href="" ng-attr-width="{{$ctrl.width}}" ng-attr-height="{{$ctrl.height}}" ng-href="{{ $ctrl.src }}"/> 
    </g> 
</svg> 

画像は、ボタンクリックのようなページで何らかのイベントが発生するまで読み込まれません。 上記のコードでは、$ ctrl.srcがAPIから動的に読み込まれます。

コード画像srcを更新する：

$scope.$watchCollection('$ctrl.image', function (image) { 
         if (image) { 
          ctrl.src = _.find(image.links, {rel:'self'}).href; 
          ctrl.getImageMetaData(ctrl.src); 
         } else { 
          ctrl.src = null; 
         } 
        }); 

Answer 1

アプリの宣言でこれを入れて、これを試してみてください：

<div data-ng-controller="myCtrl" data-ng-init="init()"></div> 

その後のinit（）は、その後にこれを入れて、ページのロード時にトリガーされます機能が呼び出されています：

// in controller 

$scope.init = function() { 
    $scope.$apply(); 
}; 

ダイジェストサイクルをトリガーする必要があります。それが大丈夫なら教えてください。

Answer 2

私は、あなたのシナリオを、コントローラのスコープでイメージを設定するときに少し時間を与えて読み込み、svgのイメージ要素にサンプルsvgを使用して表示することで、イメージをロードしようとしましたそこjsfiddleに上記のコードでは

：コードスニペット、私はそれが

angular 
 
    .module('demo', ['ngSanitize']) 
 
    .controller('DefaultController', DefaultController); 
 
    
 
    DefaultController.$inject = ['$timeout', '$sce']; 
 
    
 
    function DefaultController($timeout, $sce) { 
 
    var vm = this; 
 
    vm.imgSrc = ''; 
 
    
 
    $timeout(getImage, 2000); 
 
    
 
    function getImage() { 
 
     var img = 'https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg'; 
 
     var trustedImg = $sce.trustAsResourceUrl(img); 
 
     vm.imgSrc = trustedImg; 
 
    } 
 
    } 
 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://code.angularjs.org/1.5.8/angular-sanitize.js"></script> 
 
<div ng-app="demo"> 
 
    <div ng-controller="DefaultController as ctrl"> 
 
    <svg width="500" height="250"> 
 
     <defs> 
 
     <clipPath id="circleView"> 
 
      <circle cx="250" cy="125" r="125" fill="#FFFFFF" /> 
 
     </clipPath> 
 
     </defs> 
 
     <image width="500" height="250" xlink:href="{{ctrl.imgSrc}}" clip-path="url(#circleView)" /> 
 
    </svg> 
 
    </div> 
 
</div>

あなたの問題を解決するために、あなたの助けにアップデートすることを願っていますコンソールウィンドウにエラーはありませんが、node.js上で同じコードが実行されています。AngularJSデータバインディング式{{exp}}（xlink:href属性）でコンソールにエラーが表示されますが、getImage関数が呼び出された後に画像がロードされ、{{ctrl.imgSrc}}式が解決されます。私の心に来るコンソール1つの仮定で404エラーを解決するために

はディレクティブがでjqLit​​eやjQueryのコードを書くことでxlink:href属性を更新するためにに作成することができることですlink機能です。