하위 구성 요소가 상위 구성 요소를 업데이트하지 못하게하는 방법은 무엇입니까?

이 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

추가 코드가 필요하지 않은 것처럼 보입니다 : resolve : {}'코드 조각 - 특정 용도에 필요한 코드입니까? – 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

하위 구성 요소가 상위 구성 요소를 업데이트하지 못하게하는 방법은 무엇입니까?

답변

관련 문제