Question

我有这个角度的自定义指令，如下所示:(为简洁起见，删除了大部分代码）。

angular.module("SharedModule")
    .directive('singleSelect', ['$ionicModal', singleSelect]);

function singleSelect($ionicModal) {
    return {
        restrict: 'E',
        require: 'ngModel',
        replace:true,
        template: [
            '<div class="item item-icon-right" ng-click="showItems($event)" >',
            '{{text || headerText}}',
            '<i class="icon ion-ios-arrow-right"></i>',
            '</div>'
        ].join("")
        ,
        scope: {
            items: "=",
            headerText: "@"
        },
        link: function (scope, element, attrs, ngModelController) {

            if (ngModelController.$modelValue){ // i even tried $viewValue here
                scope.selectedItemId = ngModelController.$modelValue.id;
                scope.text = ngModelController.$modelValue.text;
            }
            scope.change = function (item) {
                ngModelController.$setViewValue(item);
                scope.text = ngModelController.$viewValue.text;
                scope.close();
            };
        }
    }
}

我将ng-model的默认值设置为：

<single-select ng-model='defaultValue' header-text='text when no default present'>

并在范围内将defaultValue的值设置为{id:"1",label:"foo"}。

我希望我的模板在渲染我的指令模板时显示foo，但事实并非如此。调试显示我的ngModel值设置为NaN。我相信我在这里错过了一些微不足道的东西。它可能是什么？

另外，如何在模板中显示我的ngModel label值，而不使用我使用的text之类的中间范围属性。

UDPATE：我已经创建了一个示例jsfiddle来解释问题。我希望我的div在jsfiddle中显示foo而不是默认文本。

Answer 1

如果你替换你让你设置你的标题文本如下foo将出现header-text={{defaultValue.text}}并删除ng-model，你可以使用angular的默认模板系统

我已经包含了一个完整的JSfiddle：http://jsfiddle.net/0Lpy7gff/

未设置角度指令中的默认ngModel

1 个答案: