Question

在我的控制器中，我有一个对象数组。该对象被称为具有一些属性，其中一个是Location，它存储一个字符串，如“A1”，“B4”，“B13”等。该位置表示网格上的位置。字母代表行，数字代表列。

现在我有了这个很好的对象列表，我希望在我的视图中将它们全部显示在网格上。当我说网格时，我的意思是松散的。我提出的网格是一系列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属性排序的，我可以简单地将它变成一个数组数组，每行一个数组，然后在我的视图中使用double ng-repeat。不幸的是它们没有按顺序排列，我不想根据location属性的格式创建一个排序方法。如果我现在在这个列表上进行双重重复，我最终会得到一块没有特定顺序的瓷砖网格。

鉴于我对javascript的有限接触，我想到了使用jquery的.append（）方法。（注意：我在angular之前引用了jquery，所以angular.element（）将使用jquery库而不是jqlite所以我可以使用jquery选择器）在我看来，我用以下格式创建了一堆div：

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

等。

然后在我的控制器中，我创建了一个方法，该方法尝试将具有“A1”位置的单个Well附加到视图上具有id =“A1”的元素。我的代码看起来像这样：

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

我认为它会将带有tile指令的div附加到id =“A1”的div，但是，它什么都不做。事实上，根本没有错误。

当然，我的psuedo jquery方法并不是解决这个问题的最佳方法。它不仅不起作用（不知道为什么，也许是因为角度需要以某种方式编译某些东西），但它也不是一个非常Angular的方法。我继续阅读教程和介绍“最初几周内根本不使用jquery”和“你将在jquery中浪费代码行的90％的东西，可以在Angular中完成”。请有人借这个可怜的程序员借口!!

Answer 1

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

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

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

然后在视图中，ng-repeat超过wellData：

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

你绝对应该远离控制器中的jQuery。只要假设每当你想要做任何与DOM相关的事情时，控制器中就没有DOM。 Controller处理ViewModel，它是视图的概念表示，但它与视图无关。无论何时打破这种分离，都会使控制器更难以测试，并使您的视图更难以更改。而且，通过违反MVVM原则，您将继续遇到AngularJS的问题。

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

1 个答案: