NGHide не работает при изменении значения в директиве

Question

У меня есть пара элементов, которые я хочу скрыть или показать в зависимости от того, доступны ли фотоданные. Однако при начальной загрузке страницы это прекрасно работает, если при добавлении фотографии с помощью метода capturePhoto в директиве я должен перезагрузить страницу, чтобы элементы отображались/скрывались, как должны.

.html

<button ng-hide="measurement.photo != ''" class="btn btn-default" ng-click="capturePhoto(measurement)">Photo</button> 
<img ng-show="measurement.photo != ''" id="{{measurement.__id}}" src="{{measurement.photo}}" width="100" height="100"/> 

.js

.directive('sidingMeasurementGroup', function($spawn, $measurementGroups, $compile, $projects, $filter, $photo) 
{ 
return { 
    scope: 
    { 
     group: "=", 
     measurementTarget: "=" 
    }, 
    restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment 
    templateUrl: 'partials/directives/siding-measurement-group.html', 
    transclude: true, 
    replace:true, 
    link: function($scope, iElm, iAttrs, controller) 
    { 
     $scope.capturePhoto = function(measurement) 
     { 
      function fail(e) 
      { 
       $error. 
       throw ('problem taking photo', e); 
      } 

      function success(imageURI) 
      { 
       cordova.exec(
        function callback(data) { 
         measurement.photo = data.filePath; 
         var image = document.getElementById(measurement.__id); 
         image.src = null; 
         image.src = measurement.photo; 
        }, 
        function errorHandler(err) { 
         alert('Error'); 
        }, 
        'CopyFiles', 
        'copyFileFromTmp', 
        [ imageURI ] 
       ); 
      } 
      $photo.takePhoto(success, fail); 
     } 
    } 
}; 

})

Если я войти значение measurement.photo после установки его, правильное значение отображается, но на HTML стороны не изменяют свою видимость. Как заставить их реагировать на изменения, которые произошли в моей директиве?

Answer 1

Вы пробовали область применения. $ Apply();

Изменить, чтобы добавить: Это работало отлично, это мой полученный код JavaScript с помощью scope.$apply()

.directive('sidingMeasurementGroup', function($spawn, $measurementGroups, $compile, $projects, $filter, $photo) 
{ 
return { 
    scope: 
    { 
     group: "=", 
     measurementTarget: "=" 
    }, 
    restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment 
    templateUrl: 'partials/directives/siding-measurement-group.html', 
    transclude: true, 
    replace:true, 
    link: function($scope, iElm, iAttrs, controller) 
    { 
     $scope.capturePhoto = function(measurement) 
     { 
      function fail(e) 
      { 
       $error. 
       throw ('problem taking photo', e); 
      } 

      function success(imageURI) 
      { 
       cordova.exec(
        function callback(data) { 
         $scope.$apply(function() { 
          $scope.photoTaken = true; 
          measurement.photo = data.filePath; 
          var image = document.getElementById(measurement.__id); 
          image.src = null; 
          image.src = measurement.photo; 
         }); 
        }, 
        function errorHandler(err) { 
         alert('Error'); 
        }, 
        'CopyFiles', 
        'copyFileFromTmp', 
        [ imageURI ] 
       ); 
      } 
      $photo.takePhoto(success, fail); 
     }