属性を使用して変更する別のコントロールを指定するカスタムディレクティブがあります。単体テスト外部要素にアクセスする角ディレクティブ
指令定義オブジェクト:
{
restrict: 'E',
templateUrl: 'myTemplate.html',
scope: {
targetId: '@'
},
controller: MyController,
controllerAs: 'vm',
bindToController: true
}
機能指令のコントローラは、ターゲット要素(入力フィールド)の内容変更に関する:
function onSelection (value) {
var $element = $('#' + vm.targetId);
$element.val('calculated stuff');
$element.trigger('input');
}
ユニットテスト(ジャスミン/カルマ/ PhantomJSを)は、現在要素をページに追加しています。これは動作しますが、コードの匂いのようです。
beforeEach(inject(function($rootScope, $compile) {
var elementHtml = '<my-directive target-id="bar"></my-directive>' +
'<input type="text" id="bar">';
scope = $rootScope.$new();
angularElement = angular.element(elementHtml);
angularElement.appendTo(document.body); // HELP ME KILL THIS!
element = $compile(angularElement)(scope);
scope.$digest();
}));
afterEach(function() {
angularElement.remove(); // HELP ME KILL THIS!
});
jQueryを回避するためにコントローラ関数を書き直そうとしました。これは役に立たなかった。
appendTo/removeを削除するために、ディレクティブまたはテストを修正するにはどうすればよいですか?
あなたのディレクティブにIDを使用すると、はるかに大きなコードの匂いになります。それは非常にjQueryスタイルであり、 "角度的な方法"ではありません。 DOMツリーの同じブランチ上のディレクティブや 'common-parent 'や' global service'アプローチのようなディレクティブで 'require'を使うことを検討してください(あなたはそれをやる方法がわからなければ検索や質問をすることができます - –
@ValentynShybanov私は、ディレクティブの改訂を含む解決策には門を開いています。このディレクティブの実際の目的は、入力またはテキストエリアのメールマージプレースホルダを挿入することです(ディレクティブテンプレートの一部ではないはずです)。あなたが推奨する方法の例やこれへのリンクを投稿したいのであれば、それを答えとして受け入れることを検討するでしょう。 – TrueWill
'onSelection()'関数をリファクタリングせずにコードからadd/remove要素を削除することはできません。 'ng-model'を#bar入力にバインドできない理由はありますか?もしあなたがそれを行うことができれば、jQueryで要素を取得する必要なしにコントローラの値を設定することができます。 – jperezov