angularjs 指令链接函数不绑定来自控制器的数据答案

【问题标题】：angularjs directive link function not binding data from Controllerangularjs 指令链接函数不绑定来自控制器的数据
【发布时间】：2016-11-23 00:00:12
【问题描述】：

我有一个指令，它在链接函数的元素参数上使用 jquery 事件，该指令有一个输入绑定到从页面的主控制器获得的值，通过嵌套指令传递隔离范围，但是当更改输入中的值时，不会反映在控制器的原始对象中。

该对象具有以下结构：发票 1： - 产品 1 - 产品 2 发票 2： - 产品 3 - 产品 4

当我更改发票金额时，值会在主控制器中更新，但当我更改产品金额时，更改不会反映。

这是我的指令，你应该做的是，当用户点击值时，输入似乎能够编辑模型的值：

eFieldTemplate.html

<div>
<div ng-if="IsMouseIn">
    <input type="text" ng-model="value" class="form-control input-sm" />
</div>
<div ng-if="IsMouseOut"  ng-click="OnMouseClick()">
    {{value}}
</div>
<div ng-if="MouseClick">
    <input  type="text" ng-model="value" class="form-control input-sm" />
</div>

eFieldDirective.js

 angular.module("appDirectives").directive("eField", function () {
    return {
        restrict: "E",
        templateUrl: "eFieldTemplate.html",
        scope: {
            value: "="
        },
        controller: function ($scope) {
            $scope.IsMouseOut = true;
            $scope.IsMouseIn = false;
            $scope.MouseClick = false;
            $scope.OnMouseEnter = function () {
                if (!$scope.MouseClick) {
                    $scope.IsMouseOut = false;
                    $scope.IsMouseIn = true;
                    $scope.MouseClick = false;
                }
            }

            $scope.OnMouseLeave = function () {
                if (!$scope.MouseClick) {
                    $scope.IsMouseOut = true;
                    $scope.IsMouseIn = false;
                    $scope.MouseClick = false;
                }
            }

            $scope.OnMouseClick = function () {
                    $scope.IsMouseOut = false;
                    $scope.IsMouseIn = false;
                    $scope.MouseClick = true;
            }

            $scope.EndEdit = function () {
                $scope.IsMouseOut = true;
                $scope.IsMouseIn = false;
                $scope.MouseClick = false;
            }
        },
        link: function (scope, el, attrs) {
            el.on("mouseenter", function () {
                scope.OnMouseEnter();
                scope.$apply();
            });

            el.on("mousemove", function () {
                scope.OnMouseEnter();
                scope.$apply();
            });

            el.on("mouseleave", function () {
                scope.OnMouseLeave();
                scope.$apply();
            });

            el.on("click", function () {
                scope.OnMouseClick();
                if (el[0].querySelector('input'))
                    el[0].querySelector('input').select();
                scope.$apply();
            });
        }
    };
});

有什么建议吗？

我在这里举个例子：Plunker

更新

我找到了一个使用 ngIf 的解决方案，即使用 $ parent.value 从父作用域引用一个变量。例如。

<Input type="text" ng-model="$parent.value" class="form-control input-sm" />

或者也指另一个对象，例如。

<input type="text" ng-model="value">
<div ng-if="IsMouseIn">
    <input type="text" ng-model="value">
</div>

这里是参考链接：what is the difference between ng-if and ng-show/ng-hide

【问题讨论】：

看不到您问题中的代码与您所描述的问题完全匹配

标签： angularjs

【解决方案1】：

使用 ng-if 使其创建/销毁新的 html 节点，它似乎无法应对。更改为 ng-show 它将起作用。我还添加了一个身体鼠标捕获，所以它结束了编辑。

<div>
<div ng-show="IsMouseIn">
    <input type="text" ng-model="value" class="form-control input-sm" />
</div>
<div ng-show="IsMouseOut"  ng-click="OnMouseClick()">
    {{value}}
</div>
<div ng-show="MouseClick">
    <input  type="text" ng-model="value" class="form-control input-sm" />
</div>

view plunker

【讨论】：

非常感谢！完美运行！
有什么方法可以继续使用 ng-if 吗？现在在显示/隐藏指令的每个元素时会出现闪烁，这会使每一行在 HTML 元素的一小部分时间内变大被移动了。
也许您可以尝试只使用一个输入字段并使用 ng-class/style 来更改其外观。我想即使从性能的角度来看它也更有意义，因为它减少了添加到摘要循环中的查找。

【解决方案2】：

如果你还想使用 ng-if not ng-show，请定义 $scope.values 和 $scope.config 并像这样使用。为了避免 ng-if 问题，您应该定义一个对象。

    <div>
<div ng-if="config.IsMouseIn">
    <input type="text" ng-model="values.value" class="form-control input-sm" />
</div>
<div ng-if="config.IsMouseOut"  ng-click="OnMouseClick()">
    {{values.value}}
</div>
<div ng-if="config.MouseClick">
    <input  type="text" ng-model="values.value" class="form-control input-sm" />
</div>

【讨论】：