1

そのため、Bootstrap ポップオーバー内にカプセル化されたディレクティブを作成しようとしています。ほとんどすべてが機能しています-ボタンがクリックされたとき、リンク、すべてがハンキードリーであることを知るイベントリスナーがあります-ng-modelを使用して最も内側のディレクティブの入力にバインドしているにもかかわらず、何も取得されていないという事実を除いて更新しました。双方向ではなく一方向バインディングを行っているかのようです。モデルの FieldValue は常に null (初期状態) であり、変更されることはありません (入力フィールドに入力されたものと等しいはずですが)。私はたくさんの答えを見てきましたが、問題に対処するものは何もないようです。

これが私のコードです：

ページ HTML

<table class="table table-bordered table-striped">
    <tbody>
        <tr ng-repeat="field in model.CustomFields">
            <td>{{field.Title}}</td>
            <td>
                <a popover field-description="field.CustomField.Description" model-value="field.FieldValue" class="trigger">
                    <text-custom-field text-model="field"></text-custom-field>{{field.FieldValue || 'Empty'}}
                </a>
            </td>
        </tr>
    </tbody>
</table>

ポップオーバー ディレクティブ

(function() {
'use strict';

angular
    .module('app.directives')
    .directive('popover', popover);

popover.$inject = ['$compile'];

function popover($compile) {

    var directive = {
        link: link,
        restrict: 'A',
        scope: {
            fieldDescription: '=',
            modelValue: '='
        }
    };
    return directive;

    function link(scope, element, attrs) {
        $(element).popover({
            html: true,
            placement: 'top',
            title: scope.fieldDescription,
            content: function () {
                return $(this).parent().find('.js-popover-content').html() + '<button ng-click="submit()" type="submit" class="btn btn-primary btn-sm" style="margin-right: 5px;"><i class="glyphicon glyphicon-ok"></i></button><button type="button" class="btn btn-default btn-sm edit-cancel" ng-click="closePop()" style="margin-right: 5px;"><i class="glyphicon glyphicon-remove"></i></button>';
            }
        });

        scope.closePop = function () {
            console.log('close');
            $('.trigger').popover('hide');
        };

        scope.submit = function () {
            console.log('submit');
            scope.$parent.$broadcast('submit');
        };

        scope.$parent.submitData = function (value) {
            scope.modelValue = value;
            console.log('submitted data');
            scope.closePop();
        };

        $(element).on('click', function (e) {
            $('.trigger').not(this).popover('hide');
            $compile($('.popover.in').contents())(scope);
        });
    }
}
})();

内部指令

(function() {
'use strict';

angular
    .module('app.directives')
    .directive('textCustomField', textCustomField);

function textCustomField() {

    var directive = {
        templateUrl: 'url/templates/TextCustomField.html',
        restrict: 'E',
        transclude: true,
        link: link,
        scope: {
            textModel: '='
        }
    };

    return directive;

    function link(scope, element, attrs) {
        scope.$parent.$on('submit', function (event) {
            console.log('heard submit event');
            var value = scope.textModel.FieldValue;
            console.log(value);
            scope.$parent.submitData(value);
        });
    }
}
})();

ディレクティブ HTML

<div class="js-popover-content hide">
    <div class="form-group" style="display: inline-flex;">
        <input type="text" class="form-control" ng-model="textModel.FieldValue" style="width: {{textModel.CustomField.DisplaySize}}; margin-right: 5px;">
    </div>
</div>

なぜこれが機能しないのか、誰にもアイデアがありますか?

4

0 に答える 0