Директива 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. Я заметил, что оба URL-адреса находятся в DOM после того, как я вызвал функцию changeImage().

<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

У меня это работает! Woohoo! Я изучаю директивы!

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