Trancluded指令和ngModelCtrl上的自定義屬性

我正在編寫一個包裝輸入字段的指令，並在整個應用程序中添加了我想要的一些標準功能。我將輸入元素轉換爲我的指令模板，將ng-focus和其他屬性添加到輸入字段，之後將其轉換爲包裝指令。現在，模板加載正確，但範圍方法不會觸發註冊的事件處理程序。我的代碼迄今：Trancluded指令和ngModelCtrl上的自定義屬性

的Transcluded指令

editInput.$inject = ['$parse']; 
function transcludedDir($parse) { 
    return { 
     require: ['^wrapperDir', 'ngModel'], 
     restrict: 'A', 
     template: function(tElem, tAttrs) { 
      tElem.attr('ng-key-enter', 'onInputSave()'); 
      return tElem; 
     }, 
     link: function($scope, element, attrs, ctrls){ 
      ctrls[0].setNgModel(ctrls[1]); 
      ctrls[0].modelSetter(function(value){ 
       $parse(atrs['ngModel'])($scope, value); 
      }); 
      $scope.onInputSave = ctrls[0].save; 
     } 
    }; 
}

包裝指令（推在某些按鈕，代表一個保存功能等）

wrapperDir.$inject = ['$q']; 
    function wrapperDir($q) { 
     return { 
      transclude: true, 
      restrict: 'E', 
      scope: { 
       onSave: '&' 
      }, 
      templateUrl: 'template.tpl.html', 
      controller: function($scope){ 
       var modelCtrl; 
       var initialValue; 
       var updateValue; 
       this.setNgModel = function(ngModel){ 
        modelCtrl = ngModel; 
        initialValue = modelCtrl.$modelValue; 
       }; 
       this.modelSetter = function(setterFunction){ 
        updateValue = setterFunction; 
       }; 
       this.save = $scope.save = function save(){ 
        var currentValue = modelCtrl.$modelValue; 
        var result = $scope.onSave({ 
         currentValue: currentValue, 
         initialValue: initialValue 
        }); 
        $q.when(result).then(function(res) { 
         initialValue = currentValue; 
        }); 
       }; 
       return this; 
      } 
     }; 
    }

的包裝DIR模板和樣本用法。包裝指令模板是很簡單的，我只是裝飾用輸入到transcluded-dir確保了transclusion鏈接掛接的特殊屬性等用途會是這個樣子：

<!-- template.tpl.html --> 
<div> 
    <!-- Input is jammed in here via transclusion --> 
    <div ng-transclude></div> 
    <div><!-- actions i want to append (buttons, etc) --></div> 
</div> 

<!-- Sample usage --> 
<wrapper-dir on-save="mySaveFn()"> 
    <input transcluded-dir type='text' ng-mode="my_little_teapot" 
</wrapper-dir>

ng-key-enter執行上輸入一個動作在輸入字段中，但transcluded作用域中的onInputSave方法永遠不會觸發。有任何想法嗎？如果你做到這一點，請提前致謝。

來源

2016-03-13 chukkwagon

我發現，使用以下語法在transcluded控制在可接受的解決方法：

editInput.$inject = ['$parse']; 
function transcludedDir($parse) { 
    return { 
     require: ['^wrapperDir', 'ngModel'], 
     restrict: 'A', 
     link: function($scope, element, attrs, ctrls){ 
      ctrls[0].setNgModel(ctrls[1]); 
      ctrls[0].modelSetter(function(value){ 
       $parse(atrs['ngModel'])($scope, value); 
      }); 

      element.bind('keypress', function(event) { 
       if (element.which == 13) { 
        ctrls[0].save(event); 
       } 
      )}; 
    }; 
}

我了有限的成功鏈接功能中加入ng-click和ng-change屬性和重新編譯的元素，但看到了奇怪的行爲某些事件的模型。使用標準的javascript事件，這個跨越式運作正在順利進行。

// This worked for some directives, but was inconsistent 
element.attr('ng-key-enter', clickToEdit.save); 
element.removeAttr('transcluded-dir'); 
element.removeAttr('data-transcluded-dir'); 
$compile(element)($scope);

來源

2016-03-14 19:35:14 chukkwagon

Trancluded指令和ngModelCtrl上的自定義屬性

回答

相關問題