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



我有两个作用域函数,当我只点击按钮时,它们中的任何一个都会被调用,但一旦被调用,我意识到作用域变量的值每次都会自动更新。

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

我的image-modal.html页面

 <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>

我有两个按钮接收和发送

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

但如果我再次单击takePhoto按钮,而不调用SendPhoto按钮,则两个都是我的$scope.images and $scope.imagesAttached length is updated to 2,而它应该只有$scope.images = 2,而$scope.imagesAttached = 1,因为我还没有调用$scope.sendPhoto

我知道angularJS有一些$apply和$digest的双绑定内容,但不确定它是如何工作的,也不知道为什么它会自动绑定我的范围变量。

感谢的任何帮助

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

$scope.images指定给$scope.imagesAttached时,两个变量都引用同一对象。

请在sendPhoto函数中尝试此操作

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

最新更新