来自另一个部分的 Angular 更新 html

Question

我的项目中有几个地方试图从不同的 html 部分打开表单。我找不到任何关于如何做到这一点的明确答案。

解释更多： 填写表格后，单击创建确实有效，它创建了新任务，并且正在服务器上创建任务，但它不会显示在表格中，直到我刷新页面并重新加载 HTML。我确实有一个从服务器检索任务的功能，它运行，所有新任务都存储在我的模型（main.items）中，但 HTML 不会刷新它。

示例 2： 当我单击此编辑按钮时，它不会打开表单。删除按钮确实有效，并使该行消失，但它在同一个表中。

简化代码：

HTML

<div ng-cotroller="MainController as main">
    <div>
        <button ng-click="main.openForm()">Add New</button>
    </div>
    <div ng-show="main.showForm">
        <form>
        ...
        </form>
    </div>
</div>
...
<table ng-cotroller="MainController as main">
    <thead><tr><th>...</th></thead>
    <tbody>
        <tr ng-repeat="item in main.items">
            <td>{{item.id}}</td>
            ...
            <td><i class="..." ng-click="main.openForm()></i></td>
        </tr>
    </tbody>
</table>

角度

app.controller('MaintenanceController', ['$http', function($http){
    var main = this;
    main.items = [];
    main.showForm = false;

    this.getItems = function(){
    $http.get(serverUrl+"/items").success(function(data){
        main.items = data;
    }

    this.openForm = function(){
        main.showForm = true;
    }
}]);

如图所示，“Add New”按钮和表格中的图标都调用了相同的函数，并且在这两种情况下，showForm 的值都变为 true，但图标并没有像 HTML 那样打开表单不要刷新它，因为它不在它的标签中（我的假设）。

再往前走，一旦我得到打开表格的图标，我还想将表格中相同任务的详细信息表格插入表格中，以便可以对其进行编辑。但现在我只想打开表单。

谁能告诉我我缺少什么，或者指出我的工作方向？

Answer 1

由于同一控制器的两个实例而出现此问题。

您创建第一个控制器：

<div ng-controller="MainController as main">

然后是第二个：

<table ng-controller="MainController as main">

他们的范围不共享。因此，当其中一个更新时，第二个保持不变。

IMO，这里不需要两个实例。但是，如果您真的想要这种方法，那么您将需要：

• 使用items 创建一些基本控制器。那么两个控制器都会继承这个集合并且所有的变化都会被更新

• 将收集到工厂。