问将一个ng控制器分配给两个不能工作的元素。
EN

Stack Overflow用户

提问于 2015-01-17 20:17:01

回答 2查看 577关注 0票数 1

我是刚接触过安古拉杰的人，我来到了一个很有趣的问题上：

我有以下代码：

<body ng-app="app" ng-controller="table">
<div id="clcikbtn"
    style="background-color: black; width: 20px; height: 20px;"
    ng-click="addTable()"></div>
<table class="table table-hover">
    <thead>
        <tr>
            <th>item</th>
            <th>price</th>
            <th>number</th>
            <th>edit</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in typesHash">
            <td>{{x.name}}</td>
            <td>{{x.price}}</td>
            <td>{{x.unit}}</td>
            <td>edit</td>
        </tr>
    </tbody>
</table>

代码运行良好的完整版本如下：

工作版本

如您所见，正文中只有一个ng-控制器=“table”，它同时控制按钮和表，单击按钮后，一行将添加到表中，但我希望上面的版本如下所示：

<body ng-app="app">
<div id="clcikbtn"
    style="background-color: black; width: 20px; height: 20px;"
    ng-controller="table" ng-click="addTable()"></div>
<table class="table table-hover" ng-controller="table">
    <thead>
        <tr>
            <th>item</th>
            <th>price</th>
            <th>number</th>
            <th>edit</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="x in typesHash">
            <td>{{x.name}}</td>
            <td>{{x.price}}</td>
            <td>{{x.unit}}</td>
            <td>edit</td>
        </tr>
    </tbody>
</table>

正如您可以看到的，所有的内容都是相同的，但是对于表和div，只有ng控制器= table，并且代码在页面加载时工作，但是在单击按钮之后，没有发生任何事情，下面是指向代码的链接：

不工作版本

我不知道为什么第二个版本不工作，其实我需要第二个版本工作，谁能帮我吗？

angularjs

angularjs-directive

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-01-17 20:31:31

你的代码有效了。控制器不是单节点，您只需创建两个控制器和两个作用域。更新其中的值不会影响另一个值。您需要创建一个单例来保存这些值；在角度世界中，最好用一个.factory()来实现。

编辑

这个柱塞展示了一个完整的示例，并对代码风格进行了一些改进;)

工厂可能是这样的：

.factory('tableService', function () {
  var dataContainer = [{
    name: 'sugar',
    price: 1,
    unit: 1
  }, {
    name: 'lemon',
    price: 100,
    unit: 2.5
  }];
  var service = {
    data: data,
    add: add
  };
  return service;
  function data() {
    return dataContainer;
  }
  function add(data) {
    dataContainer.push(data);
  }
})

对于您的示例，我只需将整个表与其控件包装在一个HTML元素和一个Controller中即可。虽然我给出的柱塞说明了如何在两个控制器之间进行通信。

票数 1

Stack Overflow用户

发布于 2015-01-17 20:50:12

您的第二个版本存在一些问题(考虑到您正在努力完成的任务)。

当控制器被注入角时，它每次都实例化该控制器的一个新实例。这意味着您的代码实际上使用了两个不同的table控制器。因此，控制器不能在实例之间维护数据。它们扮演视图模型的角色，并为分配给它的视图维护自己的范围。

为了说明作用域，我将您的代码放在下面的代码段中，并将ng-controller移到了一个级别。您可以看到，单击第一个按钮将添加到第一个网格中，而保留第二个网格，反之亦然。

 var app = angular.module('app', []);


 app.controller('table', function($scope) {
   $scope.typesHash = [{
     name: 'sugar',
     price: 1,
     unit: 1
   }, {
     name: 'lemon',
     price: 100,
     unit: 2.5
   }];
   $scope.addTable = function() {
     var arr = {
       name: 'meat',
       price: 200,
       unit: 3.3
     };
     $scope.typesHash.push(arr);
   }
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
  <div ng-controller="table">
    <div id="clcikbtn" style="background-color: black; width: 20px; height: 20px;" ng-click="addTable()"></div>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>item</th>
          <th>price</th>
          <th>number</th>
          <th>edit</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in typesHash">
          <td>{{x.name}}</td>
          <td>{{x.price}}</td>
          <td>{{x.unit}}</td>
          <td>edit</td>
        </tr>
      </tbody>
    </table>
  </div>
  <hr/>
  <div ng-controller="table">
    <div id="clcikbtn" style="background-color: black; width: 20px; height: 20px;" ng-click="addTable()"></div>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>item</th>
          <th>price</th>
          <th>number</th>
          <th>edit</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in typesHash">
          <td>{{x.name}}</td>
          <td>{{x.price}}</td>
          <td>{{x.unit}}</td>
          <td>edit</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

请查看角文档：https://docs.angularjs.org/guide/controller

当控制器通过ng控制器指令附加到DOM时，角将使用指定的Controller的构造函数实例化一个新的Controller对象。一个新的子作用域将作为$scope的控制器构造函数的可注入参数。使用控制器：

设置$scope对象的初始状态。
向$scope对象添加行为。

不要使用控制器：

操纵DOM -控制器应该只包含业务逻辑。将任何表示逻辑放入控制器中都会显著影响其可测试性。对于大多数情况有数据绑定和指令来封装手工DOM操作。
格式输入-使用角形控件代替。
滤波器输出-使用角度滤波器代替。
在控制器之间共享代码或状态-使用角服务代替。
管理其他组件的生命周期(例如，创建服务实例)。

出于这些原因，我建议对整个元素组使用相同的控制器，如下所示：

<body ng-app="app">
  <div ng-controller="table">
    <div id="clcikbtn" style="background-color: black; width: 20px; height: 20px;" ng-click="addTable()"></div>
    <table class="table table-hover">
      <thead>
        <tr>
          <th>item</th>
          <th>price</th>
          <th>number</th>
          <th>edit</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="x in typesHash">
          <td>{{x.name}}</td>
          <td>{{x.price}}</td>
          <td>{{x.unit}}</td>
          <td>edit</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>