切換編輯並顯示錶格中的字段

我試圖創建一系列的指令，支持文本顯示和編輯窗體內的就地切換。據我所知，有一個類似的模塊，如xeditable可用，但我們需要做一些不同的事情。所以我開始做一個類似的實驗。

首先，我創建了一個指令，允許通過在名爲editableForm的指令上設置屬性editEnabled來切換編輯/顯示。除了一行日誌消息之外，下面的代碼不會做任何特殊的事情。

function editableForm ($log) { 

     var directive = { 
      link: link, 
      require: ['form'], 
      restrict: 'A', 
      scope: { 
       editEnabled: "&editEnabled" 
      } 
     }; 
     return directive; 

     function link(scope, element, attrs, controller) { 


      //$log.info('editEnabled: ' + scope.editEnabled()); 
      $log.info('editEnabled: ' + attrs.editEnabled); //this also works 


     } 
    } //editableForm

然後我寫了下面的指令覆蓋input標籤在HTML：

//input directive 
    function input($log) { 

     var directive = { 
      link: link, 
      priority: -1000, 
      require: ['^?editableForm', '?ngModel'], 
      restrict: 'E' 
     }; 
     return directive; 

     function link(scope, element, attrs, ngModel) { 

      ngModel.$render = function() { 
         if (!ngModel.$viewValue || !ngModel.$viewValue) { 
          return; 
         } 
         element.text(ngModel.$viewValue); 
        }; 
       $log.info('hello from input'); 
       $log.info('input ngModel: ' + attrs.ngModel); 
       // element.val('Hello'); 

      scope.$apply(function() { 
          ngModel.$setViewValue('hello'); 
          ngModel.$render(); 
         }); 


     } 
    } //input

我試圖顯示輸入作爲input指令文本的ngModel價值，但是，它不在我的測試中似乎沒有做任何事情。有人能發現我在做什麼錯嗎？我希望用text/html替換每個輸入字段（例如用戶名爲<span>JohnDoe</span>）。

我對輸入的第一次嘗試就是一個概念驗證。如果一切正常，我會繼續在其他標籤那樣工作button，select等

來源

2015-10-05 TonyGW

遠投這裏...您需要在您的input指令都editableForm和ngModel。因此，鏈接功能的第四個參數應該是require陣列相應順序的控制器陣列，而不是您所期望的控制器陣列。

我沒有進一步檢查你的代碼，但檢查出來。

來源

2015-10-05 21:34:08

切換編輯並顯示錶格中的字段

回答

相關問題