Question

我正在尝试从孤立的范围中获取变量以使用我的视图进行更新。到目前为止我还没有成功。我创建了一个Dev Express日期框。我需要$ scope.queryParameters.startDate来更新框中单击日期的时间。我不确定你还需要我提供什么，但我可以添加更多。

控制器

$scope.doQuery = function () {
                var d = $.Deferred();
                $http.get('Api/History?' +
                    'startDate=' + $scope.queryParameters.startDate.toISOString() + '&' +
                    'endDate=' + $scope.queryParameters.endDate.toISOString()).
                    then(function (response) {
                        close(response.data, 200);
                    });
            }

查看

<ji-date-box id="startDate" label="Start Date" format="datetime" bindingOptions { value="queryParameters.startDate"}></ji-date-box>

指令

///
/// <reference path="../../typings/angularjs/angular.d.ts" />
/// <reference path="../../typings/dx/dx.all.d.ts" />
/// <reference path="../../typings/requirejs/require.d.ts" />

module FormBuilder {
    angular
        .module('FormBuilder') //Gets the FormBuilder Module
    //Creates directive for creating a text box on a form
        .directive('jiDateBox', function () {
            return {
                restrict: 'E',
                transclude: true,
                scope: {'value': '=value'},                
                // Creates a template for ji-text 
                template: function (element, attrs) {
                    //Declare attributes that can be used with DevExpress dx-text-box 
                    //var id;
                    //var value;
                    var tooltip;
                    var dxAttributes;

                    //Check for id 
                    if (angular.isDefined(attrs.id)) {
                        dxAttributes += 'id: \'' + attrs.id + '\'';
                    }

                    //Checks for format and adds to dxAttributes if found
                    if (angular.isDefined(attrs.format)) {
                        dxAttributes += ', format: \'' + attrs.format + '\'';
                    }

                    //Checks for placeholder and adds to dxAttributes if found
                    if (angular.isDefined(attrs.placeholder)) {
                        dxAttributes += ', placeholder: \'' + attrs.placeholder + '\'';
                    }

                    //Checks for maxLength and adds to dxAttributes if found
                    if (angular.isDefined(attrs.maxLength)) {
                        dxAttributes += ', maxLength: ' + attrs.maxLength;
                    }

                    //Checks for height - Accepts numberic (in pixels (ex: 55)) or string (css measurement (ex: 60%))
                    if (angular.isDefined(attrs.height)) {
                        dxAttributes += ', height: \'' + attrs.height + '\'';
                    }

                    //Check for width - Accepts numberic (in pixels (ex: 55)) or string (css measurement (ex: 60%))
                    if (angular.isDefined(attrs.width)) {
                        dxAttributes += ', width: \'' + attrs.width + '\'';
                    }

                    //Checks for disabled - This is a boolean expression. No default. 
                    if (angular.isDefined(attrs.disabled)) {
                        dxAttributes += ', disabled: \'' + attrs.disabled + '\'';
                    }

                    //Checks for readOnly - This is a boolean expression. No default. 
                    if (angular.isDefined(attrs.readOnly)) {
                        dxAttributes += ', readOnly: \'' + attrs.readOnly + '\'';
                    }

                    //Checks for value
                if (angular.isDefined(attrs.value)) {
                    dxAttributes += ", bindingOptions: { 'value': 'value' }";
                }

                    //Checks for tooltip
                    if (angular.isUndefined(attrs.tooltip)) {
                        tooltip = '';
                    } else {
                        //Create dx-tooltip and populate it with attrs.tooltip
                        tooltip = '<div ng-mouseover="toggleTooltip()" ng-mouseout="toggleTooltip()"></div><div dx-tooltip="{ target: \'#' + attrs.id + '\', visible: \'true\' }"><p>' + attrs.tooltip + '</p></div>'
                    }

                    //Wrap the ji-text box in a dx-field and give it a label.  Include all attributes above in the dx-text-box. 
                    return '<div class="dx-field">' +
                        '<div class="dx-field-label">' + attrs.label + '</div>' +
                        '<div class="dx-field-value" dx-date-box="{ ' + dxAttributes + '}"><br /></div>' +
                        '</div>'
                },
                //link: function (scope: any, elem, attrs) {
                //    scope.value = attrs.value;
                //}
            }
        });
}

Answer 1

因此，在与DevExpress支持团队合作并筛选我遇到的问题之后，我现在就有了一个有效的例子。我更新了原始帖子以反映我的源代码。请注意视图已更改我现在只需要调用我的属性“value”。在指令中，我必须为指令的作用域添加值，并在value属性中进行绑定。

AngularJS双向绑定问题

1 个答案: