javascript - 在不破坏 MVC 范式的情况下使用 ng-model (或其他解决方案)

Question

我最近问了一个question在 Stack 上，我试图通过 AngularJS 的 ng-click 获取 DOM 元素的 ID。基本上给出的答案(有一个重要的警告是):

使用 event.currentTarget 与 event.target 来获取注册绑定(bind)的元素，但这是一种非典型的方法，因为它绑定(bind)了 Controller 理想情况下， Controller 应该对 DOM 一无所知。

我现在开始对此有了更好的了解，但需要一些进一步的帮助/澄清。

使用ng-repeat，我动态渲染从数据库中提取的多个图 block ，并将它们呈现给用户进行选择。当用户单击给定的图 block 时，我希望能够“知道”该元素的 ID(或某些唯一标识符键)，以便我可以将其传递到我的 javascript/java 中，然后检索呈现它们的所述键的详细信息在不同的、更详细的 View 中。

我已经开始研究支持双向 MVC 思想的 ng-model，但我陷入了困境。您可以在下面看到，我使用不同的 ng-model 值动态渲染每个图 block ，该值等于图 block 的数据库键。这是我想要的解决方案吗？如果是这样，我如何在javascript中引用ng-model值？或者如果我这样做，我是否会再次破坏 MVC？如果是这样，保留模型的解决方案是什么？

干杯

HTML:

<div ng-repeat="tile in tileResult">
    <div ng-model={{tile.id}} ng-click="handleThisElement($event); changeView('panel3')" class="container-fluid btn-default tile">
        <div class="row">
            <div class="col-xs-9">
                <div class="row">
                    ...
                </div>
            </div>
            <div class="col-xs-3 tile-stats">
                <div class="row text-center">
                ...             
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

将 ng-model 绑定(bind)到一个对象，最好是在中继器中。另外，ng-model 通常与输入一起使用......而不是在 div 上使用，所以我不确定你想在这里实现什么。

如果该值不存在，您可能希望将该值初始化为索引(或其他默认值)，这样当您稍后想要更改该值时，这将避免出现空指针。

<div ng-repeat="tile in tileResult">
    <div ng-model="tile.someDataValue" ng-init="tile.someDataValue = $index" ng-click="handleThisElement($event); changeView('panel3')" class="container-fluid btn-default tile">
        ...
    </div>
</div>

要稍后引用该值，您只需访问适当值/索引处的tileResult对象
例如:

console.log($scope.tileResult[0].someDataValue);

或者，您可以通过将“图 block ”传递给函数来在单击时访问整个“图 block ”。例如:

<div ng-model="tile.someDataValue" ng-init="tile.someDataValue = $index" ng-click="someFunction(tile); handleThisElement($event); changeView('panel3')" class="container-fluid btn-default tile">

$scope.someFunction = function(someTile){
   console.log(someTile.id, someTile); // log the id, then the entire object
}