如何在自定義指令中進行換行？

我有一個簡單的指令叫input-text，基本上包裝了一個輸入控件。如何在自定義指令中進行換行？

給予input-text屬性的值傳遞給ng-model並且工作正常。現在我還想傳遞一個函數，通過將該函數傳遞給名爲input-change的屬性來調用模型的任何更改。

angular.module('test').directive('inputText', function() { 
    return { 
    restrict : 'A', 
    scope : { 
     inputText : '=' 
    }, 
    template : '<input ng-model="inputText" />', 
    link : function(scope, element, attr) { 
     var model = element.find('input').controller('ngModel'); 
     model.$viewChangeListeners.push(function() { 
     scope.$parent.$eval(attr.inputChange); 
     }); 
    } 
    } 

});

查看http://plnkr.co/edit/qC7FlxVNKH4SrAhLoJy4瞭解更多詳情。

傳遞給指令的函數每次鍵入控件時都會被調用，但我在控制檯中記錄的值不是控件（但前一個）中的當前$viewValue。

我還嘗試了不同的方法，通過給予input-change的字符串傳遞給ng-change輸入控制像這樣：

angular.module('test').directive('inputText', function() { 
    return { 
    restrict : 'A', 
    scope : { 
     inputText : '=', 
     inputChange : '&' 
    }, 
    template : '<input ng-model="inputText" ng-change="inputChange()" />', 
    } 

});

http://plnkr.co/edit/SutAFnCgo10QNmvBFsDs

但輸出是相同的，如上面的例子。

有人可以解釋這種行爲或告訴這裏出了什麼問題嗎？

來源

2016-07-12 M. Redemske

解決此問題的一種方法是顯式公開其輸入值在其綁定input-change。要做到這一點，你可以用這個模板：

<input ng-model="inputText" ng-change="inputChange({value: inputText})" />

，然後使用從內部範圍，而不是從外部範圍的test.model.name變量value變量：input-change="test.callback(value)"

http://plnkr.co/edit/SNatIAkPIHFSMooMWWFS?p=preview

一第二種選擇是觀察scope.$watch的變化，並在觸發時觸發您的功能：

link: function(scope) { 
    scope.$watch('inputText', function(n) { 
    scope.inputChange(); 
    }); 
}

http://plnkr.co/edit/Vrwe3SC3ejMG4aFIwBTU?p=preview

來源

2016-07-12 09:59:39 floribon

我也想你的第一個建議之前，但這上來是相當不靈活的，因爲我可能想要把可變參數量的功能。第二個很明顯，效果很好，謝謝。不過，我想知道，爲什麼在我解釋的案例中這種行爲很奇怪。 –

@ M.Redemske與選項1沒有任何東西阻止您使用其他變量。它只是增加'價值'作爲當地人。例如，你可以使用model1和model2編寫'test.callback（model1，value，model2）'，它們來自上層的作用域和由指令提供的'value'。至於爲什麼你有這個問題，我也親自得到它，並且從來不知道這是否是Angular本身的錯誤，或者是否因ng-change而不清楚。 – floribon

如何在自定義指令中進行換行？

回答

相關問題