Angular UI 模态，避免模态范围变化反映在父范围

Question

我正在构建一个 Angular 应用程序，我想在其中控制要在主页上显示的应用程序列表中的哪些应用程序。有一个名为 "Manage Apps" 的部分，我可以在其中管理可见的应用程序..

http://plnkr.co/edit/RPFvv0ZUB2OSctIQM8pQ?p=preview

上面的 plunkr 解释了我想要实现的目标..

我已将 json 中的应用程序列表从父范围传递到模态实例。我想更改那里的一个字段 IsPublished。

现在的问题是，每当我在 Modal 的 isPublished 字段中进行更改时，它会立即反映在父范围中。您可以看到应用程序在叠加层后面的父范围内被过滤..

我想避开它。我只想在点击保存/确定按钮时反映对父范围的更改。

有什么办法吗？

Answer 1

您需要源的深层副本使用 angular.copy.The 更改直接反映到主屏幕，因为您将 $scope.apps 与 $scope.items 绑定，因此两者都引用到同一位置.

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

  $scope.items = ['item1', 'item2', 'item3'];

$scope.apps = [
   {

      "FileSystemObjectType":0,
      "Id":1,
      "ContentTypeId":"0x01008178C725CC128447AD122168CA03E484",
      "Title":"First App",
      "AppUrl":{
         "__metadata":{
            "type":"SP.FieldUrlValue"
         },
         "Description":"http://www.google.com",
         "Url":"http://www.google.com"
      },
      "AppIcon":{
         "__metadata":{
            "type":"SP.FieldUrlValue"
         },
         "Description":"https://unsplash.it/150/?random",
         "Url":"https://unsplash.it/150/?random"
      },
      "CanDelete":false,
      "IsPublished":false,
      "Priority":null,
      "ID":1,
      "Modified":"2015-03-04T15:44:36Z",
      "Created":"2015-02-26T05:24:00Z",
      "AuthorId":9,
      "EditorId":9,
      "OData__UIVersionString":"1.0",
      "Attachments":false,
      "GUID":"5a3e620d-461c-4663-8837-36bfd2967dad"
   },
   {

      "FileSystemObjectType":0,
      "Id":2,
      "ContentTypeId":"0x01008178C725CC128447AD122168CA03E484",
      "Title":"App 2",
      "AppUrl":{
         "__metadata":{
            "type":"SP.FieldUrlValue"
         },
         "Description":"http://microsoft.com",
         "Url":"http://microsoft.com"
      },
      "AppIcon":{
         "__metadata":{
            "type":"SP.FieldUrlValue"
         },
         "Description":"https://unsplash.it/150/?random",
         "Url":"https://unsplash.it/150/?random"
      },
      "CanDelete":true,
      "IsPublished":false,
      "Priority":null,
      "ID":2,
      "Modified":"2015-03-04T15:44:36Z",
      "Created":"2015-02-26T05:25:11Z",
      "AuthorId":9,
      "EditorId":9,
      "OData__UIVersionString":"1.0",
      "Attachments":false,
      "GUID":"e919eb66-0f2b-4ed4-aad9-3b64400bf09a"
   },
   {

      "FileSystemObjectType":0,
      "Id":3,
      "ContentTypeId":"0x01008178C725CC128447AD122168CA03E484",
      "Title":"App 3",
      "AppUrl":{
         "__metadata":{
            "type":"SP.FieldUrlValue"
         },
         "Description":"http://google.com",
         "Url":"http://google.com"
      },
      "AppIcon":{
         "__metadata":{
            "type":"SP.FieldUrlValue"
         },
         "Description":"https://unsplash.it/150/?random",
         "Url":"https://unsplash.it/150/?random"
      },
      "CanDelete":true,
      "IsPublished":true,
      "Priority":0,
      "ID":3,
      "Modified":"2015-03-04T15:44:36Z",
      "Created":"2015-02-26T08:06:23Z",
      "AuthorId":9,
      "EditorId":9,
      "OData__UIVersionString":"1.0",
      "Attachments":false,
      "GUID":"07a63d11-fe94-4fc2-95fc-b7ddf16f160a"
   },
   {

      "FileSystemObjectType":0,
      "Id":4,
      "ContentTypeId":"0x01008178C725CC128447AD122168CA03E484",
      "Title":"Test1",
      "AppUrl":{
         "__metadata":{
            "type":"SP.FieldUrlValue"
         },
         "Description":"http://www.attini.com",
         "Url":"http://www.attini.com"
      },
      "AppIcon":{
         "__metadata":{
            "type":"SP.FieldUrlValue"
         },
         "Description":"https://unsplash.it/150/?random",
         "Url":"https://unsplash.it/150/?random"
      },
      "CanDelete":true,
      "IsPublished":true,
      "Priority":1,
      "ID":4,
      "Modified":"2015-03-04T15:44:36Z",
      "Created":"2015-02-27T03:58:37Z",
      "AuthorId":9,
      "EditorId":9,
      "OData__UIVersionString":"1.0",
      "Attachments":false,
      "GUID":"9375eff9-4101-4c1f-ad85-bedc484b355f"
   }
];

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return $scope.apps;
        }
      }
    });

    modalInstance.result.then(function (items) {
      $scope.apps = angular.copy(items);
    }, function () {
      $log.info('Modal dismissed at: ' + new Date());
    });
  };
});

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

  $scope.items = angular.copy(items);
  $scope.selected = {
    item: $scope.items[0]
  };

  $scope.ok = function () {
    $modalInstance.close($scope.items);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

工作Plunker

Angular UI 模态，避免模态范围变化反映在父范围

Angular UI Modal, avoid modal scope change reflects in parent scope

angularjs

angular-bootstrap