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指令链接功能没有绑定来自控制器的数据

回答

相关问题