AngularJS指令更改ng模型

Jon Snow 发表于 Dev

乔恩·雪诺

我正在编写一个模仿a的指令<select>，但允许我进行更多样式设置，但是找不到有关如何使用ng-model来实现它的任何信息。这是指令：

.directive('customSelect', [function() {
        return {
            restrict:'EA',
            require: "ngModel",
            scope:{
                choices:"=",
                selected:"="
            },
            template:'\
                <div class="custom-select">\
                    <div class="label">{{ selected }}</div>\
                    <ul>\
                        <li data-ng-repeat="choice in choices" data-ng-click="ngModel = choice">{{ choice }}</li>\
                    </ul>\
                </div>',
            replace:true
        }
}])

如何通过点击事件上的ng-model设置<li>？

土清

尝试ngModel.$setViewValue：

app.directive('customSelect', [function() {
        return {
            restrict:'EA',
            require: "?ngModel",
            scope:{
                choices:"=",
                selected:"@"
            },
            link:function(scope,element, attrs,ngModel){
              scope.select = function (choice){
                 ngModel.$setViewValue(choice);
              }
            },
            templateUrl:"template.html",
            replace:true
        }
}])

模板：

<div class="custom-select">
  <div class="label">{{ selected }}</div>
  <ul>
    <li data-ng-repeat="choice in choices" data-ng-click="select(choice)">{{ choice }}</li>
  </ul>
</div>

演示（单击一个项目以查看输出）

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。