angularjsコントローラからのデータをバインドしないディレクティブリンク関数

Question

私は、リンク関数の要素パラメータにjqueryイベントを使用するディレクティブを持っています。このディレクティブは、メインコントローラから取得された値にバインドされた入力を持っています。ページは隔離されたスコープ内のネストされたディレクティブを通過しますが、入力の値を変更するとコントローラの元のオブジェクトに反映されません。

オブジェクト有し、以下の構造： 請求書1： - 製品1 - 製品2 請求書2： - 製品3 - 製品4

Iは請求書の金額を変更し、値メインコントローラーで更新されますが、商品の金額を変更するとその変更は反映されません。

これは何をやるべきことは、ユーザーが値をクリックしたときに入力がモデルの値を編集することができるように見えるということです、私のディレクティブです：

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> 

参照リンクである：それは新しいHTMLノードを破壊する/作成になり、それに対処することができないように思われる場合はNGを、使用してwhat is the difference between ng-if and ng-show/ng-hide

Answer 1

。 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のない、$scope.valuesと$scope.configを定義し、このように使用している場合はNGを、使用したい場合。 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>