Как предотвратить дочерний компонент от обновления родительского компонента?

Как предотвратить обновление этого дочернего компонента angularjs из его родительского компонента? В приведенном ниже коде, в момент, когда я обновляю форму в модальном, он также обновляет родительскую модель. Это предотвратит правильную работу кнопки «Отмена».Как предотвратить дочерний компонент от обновления родительского компонента?

Here's the plunker showing the issue.

index.html

<!DOCTYPE html> 
<html> 

<head> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" /> 
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2017.1.118/styles/kendo.bootstrap.min.css" /> 
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 


    <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
    <script src="//code.angularjs.org/1.5.8/angular.js"></script> 
    <script src="//kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script> 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script> 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.js"></script> 

    <script id="documents-template" type="text/ng-template"> 
    <button id="openDetails" name="openDetails" ng-click="model.openDetails(1)" class="btn btn-default">Open Details</button> 
    <pre>{{ model | json }}</pre> 
    </script> 

    <script id="details-template" type="text/ng-template"> 
    <div class="modal-body"> 
     <label>Name To Edit</label> 
     <input ng-model="model.document.title"> 
     <br> 
     <label>Value To Edit</label> 
     <input ng-model="model.document.fileName"> 
     <br> 
     <button class="btn btn-success" type="button" ng-click="model.save()">Save Changes</button> 
     <button class="btn btn-default" type="button" ng-click="model.cancel()">Cancel</button> 
    </div> 
    <pre>{{ model | json }}</pre> 
    </script> 

    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
</head> 

<body> 

<div ng-app="app"> 

    <documents-component></documents-component> 


</div> 

</body> 

</html>

script.js

console.clear(); 

function documentController($uibModal, TransactionFactory) { 
    var model = this; 
    model.transaction = TransactionFactory; 

    model.openDetails = function(id) { 
    $uibModal.open({ 
     animation: true, 
     component: 'detailsComponent', 
     resolve: { 
     document: function() { 
      return model.transaction.documents[id - 1]; 
     } 
     } 
    }).result.then(function(result) { 
     console.log("Save result was:", result); 
    }, function(reason) { 
     console.log("Dimissed reason was:", reason); 
    }); 
    }; 
} 

function detailsController() { 
    var model = this; 
    model.document = model.resolve.document; 
    console.log("model.document", model.document); 
    model.save = function() { 
    console.log("saved was clicked. Passing back:", model.document); 
    model.modalInstance.close(model.document); 
    }; 
    model.cancel = function() { 
    model.modalInstance.dismiss("cancel"); 
    }; 
} 

var app = angular.module("app", ["kendo.directives", "ngAnimate", "ui.bootstrap"]); 

app.factory('TransactionFactory', function() { 

    var doc1 = { id:1, title: "Doc1", fileName: "Doc1.pdf" } 
    var doc2 = { id:2, title: "Doc2", fileName: "Doc2.pdf" } 
    var doc3 = { id:3, title: "Doc3", fileName: "Doc3.pdf" } 
    var doc4 = { id:4, title: "Doc4", fileName: "Doc4.pdf" } 
    var dummyData = [doc1, doc2, doc3, doc4]; 

    console.log("dummyData:", dummyData); 

    return { 
    documents: dummyData 
    }; 
}); 

app.component("documentsComponent", { 
    template: $("#documents-template").html(), 
    controllerAs: "model", 
    controller: ["$uibModal", "TransactionFactory", documentController] 
}); 

app.component("detailsComponent", { 
    template: $("#details-template").html(), 
    bindings: { 
     modalInstance: "<", 
     resolve: '<' 
    }, 
    controllerAs: "model", 
    controller: [detailsController] 
});

источник

2017-02-20 RichC

Пробовал несколько изменений ... в основном передал копию нужного объекта и только сохранил (назначил) его при нажатии кнопки «Сохранить изменения».

Ваша функция должна быть:

model.openDetails = function(id) { 
$uibModal.open({ 
    animation: true, 
    component: 'detailsComponent', 
    resolve: { 
    document: function() { 
     return angular.copy(model.transaction.documents[id - 1]); 
    } 
    } 
}).result.then(function(result) { 
    console.log("Save result was:", result); 
    model.transaction.documents[id - 1] = result ; 

}, function(reason) { 
    console.log("Dimissed reason was:", reason); 
});

Try it out

источник

2017-02-20 19:24:22 dev8080

Мне не нужны дополнительные '}). Решение: {}' часть кода - это было необходимо для чего-то конкретного? – RichC

Моя ошибка, я вложил ее в детали и по ошибке принял решение дважды. Отредактировал его. – dev8080

Проблема заключается в том, что в обоих компонентах вы используете ссылку на тот же объект с данные. Поэтому, когда вы редактируете данные в модальном режиме, вы фактически редактируете исходный объект с данными, которые также используются родительским компонентом. Решение заключается в передаче копии объекта в ваш модальный.

источник

2017-02-20 19:22:29

Обратитесь к обновленному plunker https://plnkr.co/edit/cvR8i883Q1ZlPPTA8Ryk?p=preview. вам нужно передать копию объекта.

function detailsController() { 
    var model = this; 
    model.document = angular.copy(model.resolve.document); 
    console.log("model.document", model.document); 
    model.save = function() { 
     console.log("saved was clicked. Passing back:", model.document); 
     model.modalInstance.close(model.document); 
    }; 
    model.cancel = function() { 
     model.modalInstance.dismiss("cancel"); 
    }; 
}

источник

2017-02-20 21:17:16 MechanicalCoder

Как предотвратить дочерний компонент от обновления родительского компонента?

ответ

Смежные вопросы