Question

我正在尝试动态地使用角度js在内联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

我试图通过在控制器的示波器上设置图像时给出一些延迟并通过使用示例svg将其显示在svg的图像元素中来匹配从api加载图像的场景，您可以检查下面的代码片段，我希望它能帮助你解决问题

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>

更新

使用jsfiddle中的上述代码，控制台窗口中没有错误，但是在node.js上运行相同的代码我在控制台中首先看到错误，因为{{exp}}中的AngularJS数据绑定表达式xlink:href 1}}属性，但在调用getImage函数和{{ctrl.imgSrc}}表达式得到解析后，图像会加载。

为了解决控制台中的404错误，我想到的一个假设是，可以创建一个指令，以便通过在{{1中编写jqLite或jQuery代码来更新xlink:href属性功能。

Answer 2

试试这个，把它放在app声明中：

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

然后init（）将在页面加载时被触发，然后将其放入被调用的函数中：

// in controller

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

这应该触发摘要周期。如果可以，请告诉我？

Angular js不在svg元素内渲染图像标记

2 个答案: