我应该如何在视图中集成我的指令和范围对象

Question

在我的控制器中，我有一个对象数组。这个名为Well的对象有几个属性，其中一个是Location，它存储一个字符串，如"A1"、"B4"、"B13"等。Location表示网格上的位置。字母表示行，数字表示列。

现在我有了这个很好的对象列表，我想在视图中的网格上显示它们。当我说网格时，我的意思是松散的。我提出的网格是一系列div，每个div都有一个等于位置名称的id。

我创建了一个名为tile的指令，它将显示单个对象的属性。指令看起来是这样的：

<div class="row">
    <div class="col-md-3" ng-repeat="well in wellArray">
        <ul><li ng-repeat="prop in well">{{ prop }}</li></ul>
    </div>
</div>

太棒了！然后我可以在我的视图中为Well对象列表中的特定Well创建一个tile，如下所示：

<div tile name="{{my.getName()}}" dil="{{my.getDilution()}}"></div>

如果这个对象列表是按location属性排序的，我可以简单地将它变成一个数组数组，每行一个数组，然后在我的视图中使用双ng重复。不幸的是，它们没有按顺序排列，而且我不想在给定位置属性的格式下创建排序方法。如果我像现在这样在这个列表上重复两次，我最终会得到一个没有特定顺序的瓷砖网格。

鉴于我对javascript的了解有限，我考虑使用jquery的.append（）方法。（注意：我在angular之前引用过jquery，所以angular.element（）将使用jquery库而不是jqlite，这样我就可以使用jquery选择器）在我的视图中，我创建了一组如下格式的div：

<div id="A1"></div>
<div id="A2"></div>

等等。

然后在我的控制器中，我创建了一个方法，试图将一个位置为"A1"的单个Well附加到id为"Al"的视图上的元素上。我的代码看起来是这样的：

angular.element('#A1').append('<div tile name="{{my.getName()}}" dil ="{{my.getDilution()}}"></div>');

我以为它会将带有tile指令的div附加到id="A1"的div上，但它什么也没做。事实上，根本没有错误。

当然，我的psuedo-jquery方法并不是实现这一点的最佳方法。它不仅不起作用（不知道为什么，也许是因为angular需要以某种方式编译一些东西），而且它也不是一种非常angular的方法。我一直在阅读教程和介绍中提到"在最初的几周里根本不使用jquery"one_answers"在jquery中浪费代码行的90%的事情都可以在Angular中成功完成"。有人请帮一个程序员这个可怜的借口！！

Answer 1

只需在注释中以.append为例，创建数据的概念表示，然后在视图中使用它，而不是迭代数组并将元素附加到容器元素。

在控制器中，执行以下操作：

$scope.wellData = {};
for (well in wellArray){
   var key = wellArray[well].getLocation();
   $scope.wellData[key] = well;
}

然后在视图中，在wellData:上执行ng-repeat

<div id="item.getLocation()" ng-repeat="item in wellData">
   <div tile name="{{item .getName()}}" dil="{{item .getDilution()}}"></div>
</div>

您绝对应该远离控制器中的jQuery。只要假设控制器中没有DOM，只要您有冲动去做任何与DOM相关的事情。Controller处理ViewModels，它是视图的概念性表示，但它与视图无关。无论何时打破这种分离，都会使控制器更难测试，也会使视图更难更改。而且，通过违背MVVM原则，您将不断遇到AngularJS的问题。