javascript - 受け取ったモデル値に応じて異なるテンプレートをロードするディレクティブ

Question

インライン エディターで構成されるディレクティブを作成しています。値がない場合、編集ボックスが表示されます。値がある場合、通常のスパンが表示されます。

これはディレクティブのテンプレート チャンクです。

template: function (element,attrs) {

    if (1 === 2) {
        return "<div class='true'>{{product.title}}</div>";
    } else {
        return "<div class='false'>{{product.title}}</div>";
    }

}

上記のコードは機能しますが、条件は受け取ったモデル値に基づいており ngModel、以前に渡しましたが、機能しませんでした:

require: '?ngModel',

template: function (element,attrs,ngModel) {

    if (ngModel.$modelValue !== null) {
        return "<div class='true'>{{product.title}}</div>";
    } else {
        return "<div class='false'>{{product.title}}</div>";
    }

}

HTML:

<div inline-editor ng-model="product.title"></div>

モデル値に基づいて別のテンプレートをロードする AngularJS ディレクティブを取得するにはどうすればよいですか?

編集:皆さんの回答に感謝します!, 私はあなたのコメントを受け取りました, 今私は次のコードを持っています. 今まで私のために働いてきたので、私はそれに取り組み続けます。

return {
    restrict: "A",
    require: '?ngModel',
    link: function (scope, element, attrs, ngModel) {

        if (!ngModel) return;       

        //Formatter
        function writeElement (value) {

            var template;

            if (value !== null) {
                template = "<span>" + value + "</span>";
            } else {
                //template for false
            }

            element.replaceWith(template);
        }

        ngModel.$formatters.push(writeElement);

   }