0

我有一对想要隐藏或显示的元素，具体取决于照片数据是否可用。在初始页面加载时，这工作正常，但是，如果通过指令中的 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 );
        }
    }
};

})

如果我在设置后记录 measure.photo 的值，则会显示正确的值，但在 HTML 端，元素不会改变它们的可见性。我如何让他们对我的指令中发生的变化做出反应？

4

1 回答 1

2

你试过 scope.$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 );
        }
于 2014-01-27T15:37:34.087 回答