Question

我有两个范围函数，当我单击按钮时，它们将被调用但是一旦被调用，我意识到范围变量的值每次都会自动更新。

  $scope.images = [];
  $scope.imagesAttached =[];

  $scope.takePhoto = function(index) {

    if(modalExists === true) {
      $scope.modal1.hide();
    }
    $scope.showSendButton = true;
    $scope.attachedImageExists = false;
    if($scope.imagesAttached.length > 0) {
      $scope.images = $scope.imagesAttached
      $scope.attachedImageExists = true;
    }

    var options = {
      destinationType : Camera.DestinationType.FILE_URI,
      sourceType : Camera.PictureSourceType.CAMERA,
      allowEdit : false,
      encodingType: Camera.EncodingType.JPEG,
      popoverOptions: CameraPopoverOptions,
      correctOrientation: true
    };

   // 3
    $cordovaCamera.getPicture(options).then(function(imageData) {

   // 4
    var imagetype;
      onImageSuccess(imageData);

      function onImageSuccess(fileURI) {
        createFileEntry(fileURI);
      }

      function createFileEntry(fileURI) {
        window.resolveLocalFileSystemURL(fileURI, copyFile, fail);
      }

     // 5
      function copyFile(fileEntry) {
        var name = fileEntry.fullPath.substr(fileEntry.fullPath.lastIndexOf('/') + 1);
        var newName = (new Date()).getTime() + name;     
        window.resolveLocalFileSystemURL(cordova.file.dataDirectory, function(fileSystem2) {
          fileEntry.copyTo(
            fileSystem2,
            newName,
            onCopySuccess,
            fail
          );
        }, fail);
      }

       // 6
      function onCopySuccess(entry) {
        $scope.$apply(function() {
          $scope.modal.remove();
          $scope.activeSlide = index;

          if(modalExists === false) {
            $ionicModal.fromTemplateUrl('image-modal.html', {
              scope: $scope,
            }).then(function(modal) {
              $scope.modal1 = modal;
              $scope.modal1.show();
              modalExists = true;
              $scope.images.push({file: entry.nativeURL, type: $scope.imagelist});
              console.log($scope.imagesAttached.length)
              console.log($scope.images.length)
            });
          }
          else {
            $scope.modal1.show();
            $scope.images.push({file: entry.nativeURL, type: $scope.imagelist});
            console.log($scope.imagesAttached.length)
            console.log($scope.images.length)
          }
        });
      }

      function fail(error) {
        console.log("fail: " + error.code);
      }
    }, function(err) {
      console.log(err);
    });
  }  

  $scope.sendPhoto = function() {
     $scope.imagesAttached = angular.copy($scope.images);
  }

my image-modal.html page

 <script id="image-modal.html" type="text/ng-template">
      <div class="modal image-modal transparent">
        <ion-header-bar class="bar bar-header bar-dark">
          <div class ="row">
            <div class ="col">
                <label ng-click="closeModal(1)">Cancel</label>
            </div>
            <div class ="col">
                <label ng-click="deleteImage()">Delete</label>
            </div>
            <div class ="col" id="send-images" ng-show="showSendButton">
                <label ng-click="sendtoAttach()">Send</label>
            </div>
          </div>

        </ion-header-bar>
        <ion-slide-box on-slide-changed="slideChanged($index)" show-pager="true" active-slide="activeSlide" >
            <ion-slide ng-repeat="image in images">
                <img ng-src="{{image.file}}" class="fullscreen-image"/>
            </ion-slide>
        </ion-slide-box>
        <div class="row">
            <ion-scroll>        
                   <img ng-repeat="image in images" ng-src="{{urlForImage(image.file)}}" class="image-list-thumb" height="50px"/>
                </ion-scroll>
                <button class="ion-camera" ng-click="takePhoto()"></button>
            </div>
        </div>
    </script>

我有两个按钮Take and Send

当我第一次调用takePhoto和SendPhoto时，值是正确的，一个图像被推动，我$scope.images和$scope.imagesAttached is 1的长度，

但是，如果我再次单击“拍摄照片”按钮而不调用“发送照片”按钮，则$scope.images and $scope.imagesAttached length is updated to 2同时只应$scope.images = 2而$scope.imagesAttached = 1，因为我尚未调用$scope.sendPhoto。

我知道angularJS有一些带有$ apply和$ digest的双重绑定东西，但不确定它是如何工作的以及为什么它会自动绑定我的范围变量。

任何帮助表示赞赏

Answer 1

这与Angular无关，它在工作中纯粹是JavaScript对象引用。

将$scope.images分配给$scope.imagesAttached时，两个变量都会引用同一个对象。

请在sendPhoto函数

中尝试此操作

$scope.imagesAttached = angular.copy($scope.images)

范围分配正在自动更新，而不会被称为angularjs

1 个答案: