Angular 1.5.7 指令空对象的双向绑定

Question

我有一个独立的作用域指令，它与“=”共享作用域。我们需要将一个对象传递给指令。当对象及其属性传递给指令时，指令工作正常并且对象在指令中被修改后，return正确地编辑到调用视图。

但是，当调用视图传递声明为 null 的同一对象时，即使在指令中修改了该对象之后，该对象也会 returned 为 null。

指令的相关部分如下所示：

.directive("lookupCentrosDeGestion", function () {
    var _controller = ['centrosDeGestionServices', 'toastr', function (centrosDeGestionServices, toastr) {
        var dvm = this;

        ...

        dvm.rowSelected = function (item) {
            if (!dvm.centroDeGestion)
                dvm.centroDeGestion = {};
            dvm.centroDeGestion.crecodigo = angular.copy(item.crecodigo);
            dvm.centroDeGestion.crenombre = angular.copy(item.crenombre);
            dvm.centroDeGestion.divcodigo = angular.copy(item.divcodigo);
            dvm.centroDeGestion.empRazonSocial = angular.copy(item.empRazonSocial);
            dvm.centroDeGestion.empid = angular.copy(item.empid);
            dvm.centroDeGestion.prynombre = angular.copy(item.prynombre);
            dvm.centroDeGestion.prynumero = angular.copy(item.prynumero);
            dvm.centroDeGestion.unicodigo = angular.copy(item.unicodigo);
            dvm.showMainParent();
        }

        dvm.showMainParent = function () {
            dvm.view.active = dvm.view.returnTo;
        }

    }];

    return {
        restrict: 'E',
        scope: {
            view: '=',
            centroDeGestion: '=',
            centroDeProcesoId: '=',
            centroDeProcesoName: '=',
        },
        link: _link,
        controller: _controller,
        controllerAs: 'dvm',
        bindToController: true,
        templateUrl: '/hr/admin/centrosDeGestion/lookupCentrosDeGestion.html'
    };



})

如果将 null 对象传递给指令 (dvm.centroDeGestion)，我会创建一个新对象，然后为其分配属性，但是调用视图仍会收到 null。

我也想直接分配对象，而不是必须分配每个属性，但行 dvm.centroDeGestion = angular.copy(ítem) 将始终 return null。

关于如何解决这些问题有什么想法吗？

提前致谢

Answer 1

一般数据绑定注意事项

您只能绑定到一个变量。从绑定到内存中的位置的角度考虑。它与 C++ 中的指针非常相似。

在这种情况下，如果您尝试绑定 null，则您没有指向任何内存，因此没有绑定。

请注意，对于绑定，如果您重新分配变量，您将打破绑定，因为调用者不知道新变量。如果您仅修改变量的属性，调用者仍将引用它并且绑定将起作用。

为了说明，请考虑以下代码：

var a = {};
var b = a; // aka data-binding

b.foo = 'bar'; // a.foo == 'bar' (because b === a)

b = {}; // b !== a (whoops! broken binding!)
b.baz = 'biz'; // a.baz == undefined

查看您的实施...

假设您像这样使用此指令：<lookup-centros-de-gestion centro-de-gestion="foo">

一个简单的解决方案是让调用者初始化 $scope.foo = {}; 并从 rowSelected 函数中删除 dvm.centroDeGestion={};（因为重新分配 "root" 变量会破坏绑定！- - 因为在调用者中仍然有它的 $scope.foo 对象，但它与新分配的 dvm.centroDeGestion).

不是同一个内存

另一种解决方案是绑定到一个对象并在其上设置某个属性。例如：dvm.centroDeGestion.data={};，然后要在调用者中访问它的属性，您可以使用 foo.data.*

希望这个解释是有道理的。如果您对此有任何疑问，我会尽力澄清。

Angular 1.5.7 指令空对象的双向绑定

Angular 1.5.7 directive two way binding of null object

null

directive

angularjs