angularjs指令鏈接功能沒有綁定來自控制器的數據

我有一個指令，使用鏈接函數的元素參數上的jQuery事件，該指令有一個輸入綁定到從主控制器獲得的值該頁面通過嵌套的指令在一個獨立的範圍內傳遞，但是當改變輸入中的值時並不反映在來自控制器的原始對象中。angularjs指令鏈接功能沒有綁定來自控制器的數據

該對象具有以下結構：發票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

來源

2016-11-23 pBlackmouth

沒有看到您的問題中的代碼如何與您所描述的問題相匹配 – Phil

採用NG-如果使得創建/銷燬新的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

來源

2016-11-23 00:38:02 joe

非常感謝！完美的作品！ – pBlackmouth

有沒有什麼方法可以繼續使用ng-if？，現在當顯示/隱藏指令的每個元素時都會閃爍，這使得每個行在HTML元素移動時的時間增加一小部分。 – pBlackmouth

也許你可以嘗試只有一個輸入字段，並使用ng-class/style來改變它的外觀和感覺。即使從性能的角度來看，我認爲它更有意義，因爲它將更少的查找添加到摘要循環中。 – joe

如果你想使用NG-如果沒有NG-展會仍，定義$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>

來源

2016-11-23 16:48:08

angularjs指令鏈接功能沒有綁定來自控制器的數據

回答

相關問題