AngularJsディレクティブビューはng-repeatで更新されません

Question

ng-repeatを含むディレクティブがあります。そして、配列項目の変更順に関数をトグルします。スコープモデルを表示しているとき、その項目の順序は変わりますがUIは更新されません。 $ apply（）のスコープを試しましたが、そのプロセスはビジー状態です。

.directive('example', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     template: ` 
       Checking model: {{model}} 

       <div ng-repeat="(key, row) in model"> 
         <div ng-hide="key == 0"> 
          <div class="icon-arrow-u" ng-hide="$first" ng-click="moveUp(key)"></div> 
          <div class="icon-delete" ng-click="removeCell(key)"></div> 
          <div class="icon-arrow-d" ng-hide="$last" ng-click="moveDown(key)"></div> 
         </div> 
        </div> 
       </div> 
     `, 
     scope: { 
      model: '=' 
     }, 
     link: function(scope, element) { 
      scope.moveItem = function (origin, destination) { 
       var temp = scope.model[destination]; 
       scope.model[destination] = scope.model[origin]; 
       scope.model[origin] = temp; 
      }; 

      scope.moveUp = function(index) { 
       scope.moveItem(index, index - 1); 
      } 

      scope.moveDown = function(index) { 
       scope.moveItem(index, index + 1); 
      } 
     } 
    } 
}) 

Answer 1

コードフィドルを見ることなく、理由はng-repeatの中にあると思います。 track by式を追加する必要があります（AngularJS docを参照）

たとえば、(key, row) in model track by keyまたは(key, row) in model track by rowと書くことができます。どちらの方法でも、すべての行に固有の値でなければなりません。

Answer 2

directivesを使用すると、スコープが分離されます。変更を確認するには、スコープを適用する必要があります。

リンク内の各関数またはイベントが呼び出されるたびに、次のコードを追加します。リンク機能を使用インサイド

：メインコントローラから

 if (scope.$root.$$phase != '$apply' && 
      scope.$root.$$phase != '$digest') { 
      scope.$apply(); 

     } 

 if ($scope.$root.$$phase != '$apply' && 
      $scope.$root.$$phase != '$digest') { 
      $scope.$apply(); 

     } 

問題が解決しない場合は、各イベントでこれを呼び出してみてください。

function apply(scope) { 
    if (!scope.$$phase && !scope.$root.$$phase) { 
    scope.$apply(); 
    console.log("Scope Apply Done !!"); 
    } 
    else { 
    console.log("Scheduling Apply after 200ms digest cycle already in progress"); 
    setTimeout(function() { 
     apply(scope) 
    }, 200); 
    } 
} 

これが役立ちます。