将值存储在指令中以备后用

Question

我想在 ngRepeat 中保存一个对象，以便我可以在其子项中使用该对象，如以下代码所示：

<div ng-repeat="bar in foo.bar> 
    <div ng-repeat="qux in baz.qux" myvalue="{'item1':foo.var1, 'item2':qux.var2}">
        <div ng-click="myFirstFunction(myvalue)"></div>
        <div ng-click="mySecondFunction(myvalue)"></div>
    </div 
</div

我要生成然后使用的对象相当大，我不想为每个 ngClick 指令重复定义它。

我考虑过将它保存到一个范围变量中，但该对象会随着 ngRepeat 的每次迭代而改变。

是否有指令或其他方式可用于存储此值供以后使用？

Answer 1

你可以在这里做一些天真的事情，它会起作用的：

<div ng-repeat="bar in foo.bar> 
    <div ng-repeat="qux in baz.qux">
        <div ng-click="myFirstFunction(foo, quz)"></div>
        <div ng-click="mySecondFunction(foo, quz)"></div>
    </div>
</div>

Angular点一下就知道重复的范围

Answer 2

您可以使用 ng-storage 将其存储在本地存储中。 https://github.com/gsklee/ngStorage

这将允许您存储它，然后在应用程序的任何地方使用它。

Answer 3

cookies，你也有ng-cookies https://docs.angularjs.org/api/ngCookies

试试这个！或 cookieStorage

Answer 4

为避免重复可能很长的变量定义，您可以使用 ngInit 指令，每次创建相应元素时都会执行其内容。

<div ng-repeat="bar in foo.bar> 
    <div
        ng-repeat="qux in baz.qux"
        ng-init="myValue = {'item1':foo.var1, 'item2':qux.var2 }"
    >
        <div ng-click="myFirstFunction(myValue)"></div>
        <div ng-click="mySecondFunction(myValue)"></div>
    </div>
</div>

但是，模板中的复杂代码很少是个好主意。按照文档的建议，考虑将您的逻辑移动到控制器中：

The only appropriate use of ngInit is for aliasing special properties of ngRepeat, as seen in the demo below. Besides this case, you should use controllers rather than ngInit to initialize values on a scope.

将值存储在指令中以备后用

Store value in a directive for later use

javascript

angularjs

ng-repeat

angularjs-ng-repeat