Question

所以我试图制作一个封装在Bootstrap popover中的指令。几乎所有东西都在工作 - 我有事件监听器知道什么时候点击按钮，链接，一切都是傻瓜 - 除了事实，即使我使用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>

Popover指令

(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>

有没有人知道为什么这不起作用？

Angularjs指令输入绑定与引导程序弹出窗口

0 个答案: