Question

我最近在Stack上问question我试图通过AngularJS＆＃39;来获取DOM元素的ID。 ng-click。基本上给出了答案（有一个重要的警告）：

使用event.currentTarget vs event.target来获取绑定所注册的元素，但这是一种非典型的方法，因为它将控制器绑定到DOM，理想情况下控制器应该什么都不知道关于DOM。

我现在开始更好地了解这一点，但希望得到进一步的帮助/澄清。

使用ng-repeat我动态渲染从数据库中提取的多个图块并将其呈现给用户以供选择。当用户点击给定的磁贴时，我希望能够知道＆＃39;该元素的ID（或一些唯一标识符键），以便我可以将其传递给我的javascript / java，然后检索所述键的详细信息，在不同的，更详细的视图中呈现它们。

我开始研究支持双向MVC理念的ng-model，但我已经陷入困境。您可以在下面看到，我使用不同的ng-model值动态渲染每个磁贴，该值等于磁贴的数据库密钥。这是我想要的解决方案吗？如果是这样，我如何在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绑定到一个对象，如果它在转发器中是最好的话。此外，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);

或者您可以通过将“tile”传递给函数来访问整个“tile”。例如：

<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
}

Answer 2

如果我理解正确，您希望能够访问每个磁贴的唯一标识符。

没有Ng-Model就可以轻松完成！一个简单的解决方法是使用唯一标识符设置每个元素的id：

<div ng-repeat="tile in tileResult">
<div id="{{tile.id}}" ng-click="handleThisElement($event); changeView('panel3')" class="container-fluid btn-default tile">
    <div class="row">

这样，当您将 $ event 传递给 handleThisElement 函数时，您就可以像以前一样访问该ID。

使用ng-model（或其他解决方案）而不破坏MVC范例

2 个答案: