0

だから私はこのような他の多くの質問を見てきましたが、私がやろうとしていることを完全にカバーしているように見えるものは見つかりませんでした.

ディレクティブでテンプレートを使用して、検索ボックスのような派手なものを含むカスタム ドロップダウンを作成しています。このために、私は使用する必要がありますtemplate。compilewithだけでは使用できませんelement.replaceWith(param を使用するcompileとこれを機能させることができますattrsが、カスタム テンプレートは機能しません)。

カスタム タグの属性の内容に応じて、特定のオプションの配列を選択するだけです。

HTML:<customdropdown useoptionset="first"></customdropdown>

JS:

angular.module('ui.bootstrap', [])

.constant('customdropdownConfig', {
    //bunch of properties here
})

.directive('customdropdown ', ['$parse', 'customdropdownConfig', function ($compile, customdropdownConfig) {
    return {
        restrict: 'EA',
        replace: true,
        template: (function(conf) {
            var optionset = //how can i access the useoptionset attribute here?

            var options = //stuff involving useoptionset and conf

            return '<select ui-select="customDropdown">' + options + '</select>';
        }(customdropdownConfig))
    };
}])

これは非常に一般的で明白な使用例であるように思えますが、Angular の仕組みについて何かが欠けている可能性があります。

4

1 に答える 1

1

テンプレートをもっとシンプルにしてから、リンク機能を使用して<select>要素に動的コンテンツを追加してみてください。

このような：

.directive('customdropdown ', ['$parse', 'customdropdownConfig', function ($compile, customdropdownConfig) {
    return {
        restrict: 'EA',
        replace: true,
        template: '<select ui-select="customDropdown"></select>',
        link: function(scope, elem, attrs){
            var optionset = attrs.optionset;
            var options = //stuff involving useoptionset and conf
            elem.html(options);
            $compile(elem.contents())(scope);
        }
    };
}]);

すでにこれを試したようですが、なぜうまくいかないのかわかりません。そうでない場合は、これまでに試したことと、なぜうまくいかなかったのかについて詳しく説明してください。

于 2013-10-22T02:07:20.357 に答える