Question

我有一个指令，它在链接函数的element参数上使用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

Answer 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

Answer 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>

angularjs指令链接函数不绑定来自Controller的数据

2 个答案: