javascript - AngularJS点击编辑下拉框等字段

Question

我偶然发现了这个 article关于如何为表单构建点击编辑功能。作者指出:

What about if you wanted input type="date" or even a select? This is where you could add some extra attribute names to the directive’s scope, like fieldType, and then change some elements in the template based on that value. Or for full customisation, you could even turn off replace: true and add a compile function that wraps the necessary click to edit markup around any existing content in the page.

在查看代码时，我似乎无法全神贯注地思考如何以一种可以将模板应用于任何 Angular 组件的方式来操作模板，更不用说如何将它应用于下拉列表了.以下文章中的代码:

    app.directive("clickToEdit", function() {
    var editorTemplate = '<div class="click-to-edit">' +
        '<div ng-hide="view.editorEnabled">' +
            '{{value}} ' +
            '<a ng-click="enableEditor()">Edit</a>' +
        '</div>' +
        '<div ng-show="view.editorEnabled">' +
            '<input ng-model="view.editableValue">' +
            '<a href="#" ng-click="save()">Save</a>' +
            ' or ' +
            '<a ng-click="disableEditor()">cancel</a>.' +
        '</div>' +
    '</div>';

    return {
        restrict: "A",
        replace: true,
        template: editorTemplate,
        scope: {
            value: "=clickToEdit",
        },
        controller: function($scope) {
            $scope.view = {
                editableValue: $scope.value,
                editorEnabled: false
            };

            $scope.enableEditor = function() {
                $scope.view.editorEnabled = true;
                $scope.view.editableValue = $scope.value;
            };

            $scope.disableEditor = function() {
                $scope.view.editorEnabled = false;
            };

            $scope.save = function() {
                $scope.value = $scope.view.editableValue;
                $scope.disableEditor();
            };
        }
    };
});

我的问题是，我们如何扩展上面的代码以允许下拉编辑？那就是能够更改为所选择的值。

Answer 1

您可能会考虑的一种方法是使用 template: function(tElement,tAttrs )。

这将允许您根据属性返回适当的模板。

app.directive("clickToEdit", function() {
      return {
       /* pseudo example*/
        template: function(tElement,tAttrs ){
             switch( tAttrs.type){
                 case 'text':
                    return '<input type="text"/>';
                 break;
             }
        },....

这在 $compile docs 中有概述。