Question

此代码可用并显示图像

<div class="container" bg-image="{{UrlResource}}">

但是，当我将其更改为下面的代码时，它不再显示图像，但我确实看到了DOM中的网址

<div class="container" bg-image="{{model.UrlResource}}">

我看到上面两个代码的DOM输出有差异

第一个代码的输出

<div class="container" bg-image="http://localhost:9000/ulkOcf855VSmjhCIX9fMeGht8kwUylaD.png" style="background-image: url(http://localhost:9000/ulkOcf855VSmjhCIX9fMeGht8kwUylaD.png); background-size: cover;"></div>

输出第二个代码

<div class="container" bg-image="http://localhost:9000/ulkOcf855VSmjhCIX9fMeGht8kwUylaD.png"></div>

bg-image是指令

 app.directive('bgImage', function() {
    return {
      restrict: 'A',
      link: function($scope, element, attrs) {
        $scope.$watch('UrlResource', function(n) {
          if (n) {
            element.css({
              'background-image': 'url(' + attrs.bgImage + ')',
              'background-size': 'cover'
            });
          }
        });
      }
    };
  });

Answer 1

在你的指令中，只需交换

$scope.$watch('UrlResource', function(n) {

到

$scope.$watch('model.UrlResource', function(n) {

根据你的新结构。

使用点缀时出现奇怪的AngularJS行为

1 个答案: