1

所以我正在尝试制作一个封装在 Bootstrap 弹出框内的指令。几乎所有东西都在工作——我有事件监听器知道什么时候点击按钮,链接,一切都是 hunkey-dory——除了即使我使用 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