angularjs指令鏈接函數未綁定Controller中的數據

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();
            });
        }
    };
});

有什么建議么？

我在這里給出示例： 柱塞

更新

我找到了一個使用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>

這是參考鏈接： ng-if和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>

檢視縮圖

Answer 2

如果您仍要使用ng-if而不是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>