Question

我有这样的指示：

app.directive("myData", function() {
    return {
        restrict: "E",
        templateUrl: "myTemplate.html"
    };
});

然后在myTemplate.html中我有类似的东西：

<input type="number"
       ng-if="(getMyObject(item.DataId)).Valid"
       ng-model="(getMyObject(item.DataId)).Price"/>

<div ng-bind="(getMyObject(item.DataId)).Price"
     ng-if="!(getMyObject(item.DataId).Valid"></div>

此指令位于ng-repeat内（因此为item.）。

我的问题是如何将getMyObject()的对象存储在某个地方，以便我不必反复调用它？我尝试将ng-init用作：

<p ng-init="dataObject=getMyObject(item.DataId)"/>

并引用它：

<input type="number"
       ng-if="dataObject.Valid"
       ng-model="dataObject.Price"/>

<div ng-bind="dataObject.Price"
     ng-if="!dataObject.Valid"></div>

但是，一旦我提交任何更改并更改模型中的数据，这都不起作用，因为ng-init仅在页面加载时第一次有效。

Answer 1

您可以在链接功能中设置一次性绑定：

app.directive("myData", function() {
  return {
      restrict: "E",
      templateUrl: "myTemplate.html",
      link: function(scope) {
        scope.dataObject = scope.getMyObject(scope.item.DataId);
      }
  };
});

这样，你的指令每个实例会有一个dataObject，但只计算一次。现在，如果您需要在更改后“重新计算”此dataObject，则可以在函数或观察者中执行此操作：

link: function(scope) {
  scope.dataObject = scope.getMyObject(scope.item.DataId);

  // Option 1
  scope.$watch('somethingToWatch', function() {
    scope.dataObject = scope.getMyObject(scope.item.DataId);
  });

  // Option 2 (choose one or the other)
  scope.onSubmit = function() {
    scope.dataObject = scope.getMyObject(scope.item.DataId);
  };
}

在模板中重用对象引用

1 个答案: