即使範圍變量已被修改，AngularJS指令也不會更改

Question

以下是指令。我認爲我的指令中缺少一些東西，可以使它知道$ scope中的更改。

'use strict'; 

app.directive('backImg', function(){ 
     return function(scope, element, attrs) { 
      var url = attrs.backImg; 
      element.css({ 
       'background-image': 'url(' + url +')', 
       'background-size' : 'cover' 
      }); 
     }; 
}); 

，這裏是我的控制器中的HTML

<div back-img="{{url}}"> 
    </div> 

，我有

$scope.url = 'image/placeholder.jpg'; 

然後我也有一個按鈕，改變$ scope.url的價值。

$scope.changeImage = function() { 
    $scope.url = 'image/newimage.jpg'; 
} 

我可以看到在DOM中的變化，但所顯示的背景圖像仍然顯示舊的圖像，其是placeholder.jpg。我注意到，在調用changeImage（）函數後，這兩個URL都在DOM中。

<div back-img="http://localhost:9000/image/newimage.jpg" style="background-image: url(http://localhost:9000/image/placeholder.jpg); background-size: cover;"> 
</div> 

Answer 1

我明白了！哇噢！我正在學習指令！

app.directive('backImg', function() { 
    return { 
    restrict: 'A', 
    link: function($scope, element, attrs) { 
     $scope.$watch('url', function(n, o) { 
     console.log('checking .....', n, o); 
     if (n) { 
      console.log('changing'); 
      element.css({ 
      'background-image': 'url(' + attrs.backImg + ')', 
      'background-size': 'cover' 
      }); 
     } 
     }); 
    } 
    }; 
});