传递函数作为双向绑定重新触发$ digest-无限循环 [英] passing function as two way binding re-triggers $digest - infinite loop

问题描述

我需要将值从父指令(绑定到控制器X)传递给子指令，对其进行更新，然后将其一直传递回控制器X updateItem 函数.

I need to pass in a value from a parent directive (bound to controller X) to a child directive, update it, then pass it back all the way to the controller X updateItem function.

这将导致父控制器X接收更新的值，从而触发新的 $ digest 循环，并将该项向下传递到链中，依此类推.这会导致无限循环(此处讨论).

This causes the parent controller X to receive the updated value, which triggers a new $digest loop, and passes the item down through the chain, and so on. This causes an infinite loop (discussed here).

尽管我需要从child指令更新值，所以一旦控制器的 $ scope.items 更新后，如何避免重新触发 $ digest 周期?

I need to update the value from the child directive though, so how can I avoid re-triggering the $digest cycle once the controller's $scope.items is updated?

父控制器X:

$scope.updateItem = function(item) {
  $scope.items = item;
};

父指令模板:绑定到父控制器

Parent directive template: Bound to parent controller

<div>
   <custom-phrases item-to-update="item" update-item="updateItem"></custom-phrases>
</div>

父母指令js:

angular
  .module('app')
  .directive('itemlist',
    function($rootScope, $state) {
      return {
        restrict: 'EA',
        templateUrl: 'directives/cms/itemlist/itemlist.tpl.html',
        scope: {
        },
        link: function(scope, element) {
            //
        },
        controller: parentControllerX
      };
    });

子指令js:

angular
  .module('app')
  .directive('customPhrases',
    function($rootScope) {
      return {
        restrict: 'AE',
        scope: {
          itemToUpdate: '=',
          updateItem: '=',
        },
        templateUrl: 'directives/cms/customPhrases/custom_phrases_directive.tpl.html',
        link: function(scope, element) {

          scope.itemToUpdate.attr1 += 1;
          scope.itemToUpdate.attr2 += 1;

          // then pass it back to parent directive
          scope.updateItem(scope.itemToUpdate);
          ...

---

如果我更改为 {{item}} :

<div>
   <custom-phrases item-to-update="{{ item }}" update-item="updateItem"></custom-phrases>
</div>

并将其传递给child指令，它以字符串而不是对象的形式出现.

And pass it into the child directive, it comes through as a string and not an object.

如果我只是在子指令中更新 items ，就像这样:

If I simply update items in the child directive, like so:

   scope.items = {
     test: 'testing 123'
   };

并在子指令中保持2向绑定:

And maintain 2-way binding in the child directive:

items: '=',

scope.items 永远不会在父指令和控制器级别进行更新.

scope.items is never updated at the parent directive and controller level.

推荐答案

如果您的子指令注意更新值并将其传递回父级，则您不需要使用 = 进行双向绑定

If your child directive taking care to update the value and passed it back parent then you don't need two way binding with =.

您可以使用<

scope: {
      itemToUpdate: '<', // use one way binding
      updateItem: '=',
    }

我的坏:您已经有两种方式进行数据绑定，您无需将其从子指令中传回.

My bad : You already having two way data binding,you dont need to pass it back from child directive.

scope.updateItem(scope.itemToUpdate); .//不需要

它将在那里自动可用.

这篇关于传递函数作为双向绑定重新触发$ digest-无限循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！