Angular 指令修改 ngModel 的数据答案

【问题标题】：Angular directive modify data for ngModelAngular 指令修改 ngModel 的数据
【发布时间】：2014-10-23 00:31:11
【问题描述】：

我为自定义下拉菜单做了一个指令。一切都按预期工作 - 我在控制器中定义了所有选项并将它们传递给指令。指令生成 html 并在更改时将所选值传递给我的 ngModel。

我想改进的是。最初我只是将 ngModel 设置为 PUBLIC、PRIVATE 或 HIDDEN。然后指令（已经知道？）图标和下拉列表中显示的值。进行选择时，我的模型再次只是 PUBLIC、PRIVATE 或 HIDDEN 而不是 { name: 'Public', icon: 'globe', value: 'PUBLIC' }。

指令：

.directive('sidPrivacyDropdown', function () {

    return {
        template:   '<div class="input-group sid-privacy-dropdown">\
                        <ui-select ng-model="selectedValue" theme="bootstrap" search-enabled="false" ng-disabled="disabled">\
                            <ui-select-match>{{selectedValue.name}}</ui-select-match>\
                            <ui-select-choices repeat="option in selectOptions">\
                                <div><span class="icon icon-{{option.icon}}"></span>{{option.name}}</div>\
                            </ui-select-choices>\
                        </ui-select>\
                    </div>',
        scope: {
            selectedValue: '=',
            selectOptions: '='
        },
        replace: true
    };
});

控制器：

$scope.privacyOptions = [
    { name: 'Public',   icon: 'globe',  value: 'PUBLIC'     },
    { name: 'Members',  icon: 'group',  value: 'MEMBERS'    },
    { name: 'Hidden',   icon: 'lock',   value: 'HIDDEN'     }
];

HTML：

<div sid-privacy-dropdown selected-value="edit.privacy.field" select-options="privacyOptions"></div>

由于我对 Angular 和指令比较陌生，我不知道应该如何或在哪里修改这些值。最终我希望 ngModel 只是一个常数。

I also prepared a Plunker

编辑！也许这将有助于更好地理解我想要什么：

这是一个 Plunker，它完成了我想要它做的一半：Plunker。我现在可以将'HIDDEN' 分配为初始值。该指令从所有选项中获取正确的项目并显示它。我不能让它反过来工作。当“selectedObject”发生变化时，它应该更新selectedValue。

【问题讨论】：

我不明白你的问题是什么。 ngModel 保持不变意味着什么。你在说什么 ngModel？
对不起，如果我不够清楚...我希望 edit.privacy.field 是 PUBLIC、MEMBERS 或 HIDDEN。在为edit.privacy.field 设置初始值时，我想再次将其设置为PUBLIC、MEMBERS 或HIDDEN。目前我必须像这样分配它$scope.privacyOptions[0]。当我将它传递给服务器时，我希望它的值是一个单词，而不是 { 'name:'Public', icon:'globe', value:'PUBLIC' } 对象。
我不想在前后做同样的转换。首先来自'PUBLIC' to { name: 'Public', icon: 'globe', value: 'PUBLIC' }，然后在我传递之前，来自Object to 'PUBLIC'

标签： angularjs angularjs-directive

【解决方案1】：

我使用$watch 找到了一个可行的解决方案。反馈会很有帮助。因为$watch 看起来有点像作弊，让我觉得有更好的解决方案。

不管怎样，我不得不把我的指令改成这个。

app.directive('sidPrivacyDropdown', function () {

    return {
        template:   '<div class="input-group sid-privacy-dropdown">\
                        <ui-select ng-model="$parent.selectedObject" theme="bootstrap" search-enabled="false" ng-disabled="disabled">\
                            <ui-select-match>{{selectedObject.name}}</ui-select-match>\
                            <ui-select-choices repeat="option in selectOptions">\
                                <div><span class="glyphicon glyphicon-{{option.icon}}"></span>{{option.name}}</div>\
                            </ui-select-choices>\
                        </ui-select>\
                    </div>',
        scope: {
            selectedValue: '=',
            selectOptions: '='
        },
        link: function(scope, elem, attrs) {
            scope.$watch('selectedObject', function(obj){
                scope.selectedValue = obj['value'];
            });
            scope.selectedObject = angular.copy(scope.selectOptions.filter(function(obj){return obj['value'] === scope.selectedValue})[0]);
        },
        replace: true
    };
});

首先，我找到selectedObject 的相应隐私对象并在模板中使用它。现在，当 ui-select 更新 selectedObject 时，我使用$watch 来捕捉它并将selectedValue 设置为selectedObject['value']。

这样可以达到我想要的效果，但我认为没有$watch 也可以做到这一点？

【讨论】：