如何防止子組件更新父組件？

如何防止這個angularjs的子組件更新其父組件？在下面的代碼中，我更新了模態中的表單，它也更新了父模型。這可以防止「取消」按鈕正常工作。如何防止子組件更新父組件？

的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

如何防止子組件更新父組件？

回答

相關問題