Angular 1 - 在父控制器和子控制器之间共享数据 - 需要建议

时间:2016-12-13 16:43:02

标签: javascript angularjs

我正在处理2个应用程序,它们只显示所有活动事件,然后显示所有已关闭的事件。这两个应用程序在创建,修改,保存和删除时共享相似的逻辑。

所以我试图找出最好的方法来共享两个应用程序之间的CRUD逻辑。我认为也许最好设置一个父子控制器设置如下:

Common_CRUD_file.js:

var Common_Application = .module('Common_Application ',[app, app1, app2, app3])
Parent_controller.controller('Parent_controller'), function ($scope, $http, $filter, $timeout) {

//all my CRUD logic goes in here
$scope.edit = function(data) { //edit logic goes here }
$scope.save = function(data) { //save logic goes here }
$scope.cancel = function(data) { //cancel logic goes here }
$scope.delete = function(data) { //delete logic goes here }

}

Child_Show_closed_incidents.js:

var Common_Application = angular.module('Common_Application');
Child_controller.controller('Child_controller'), function ($scope, $http, $filter, $timeout) {

//All of the app logic goes here    
$scope.get_data = function(data) { //store fetched ajax data in $scope.All_closed_incidents  }

}

HTML文件的快速摘录:

<div ng-app="Common_Application" ng-controller="Parent_controller">
<div ng-controller="Child_controller">
<table directive_for_angular_app_here>
  <tr>
    <td></td>
    <td>Description</td>
    <td>Status</td>
  </tr>
  <tr ng-repeat="incident in All_closed_incidents">
    <td><button type="button" ng-click="edit(incident)">Edit</button></td>
    <td>{{incident.Description}}</td>
    <td>{{incident.Status}}</td>
  </tr>  
</div>
</div>

所以这个设置能够加载我的表,但是当我点击按钮时,编辑功能似乎根本就没有了。控制台中也没有错误。当我期望它共享其所有范围时,似乎忽略了我的父函数。有人会有更好的aproch吗?

1 个答案:

答案 0 :(得分:2)

我会丢弃您拥有的父/子设置。将父项转换为具有以下功能的服务:

    //all my CRUD logic goes in here
$scope.edit = function(data) { //edit logic goes here }
$scope.save = function(data) { //save logic goes here }
$scope.cancel = function(data) { //cancel logic goes here }
$scope.delete = function(data) { //delete logic goes here }

然后将该服务注入子控制器并调用函数。降低复杂性并增强可重用性。