如何动态添加具有自己独特的 typeahead-on-select 事件的 AngularJS typeahead 组件？

Question

我能够动态添加预输入组件，但不能为其提供自己的预输入选择事件。 （这部分有效）

对于第二个输入，当从列表中选择一个项目时，它应该像这样根据数据库中的数据填充成本和金额。 （这部分不行）

如何动态添加一个 AngularJS typeahead 组件，它有自己独特的 typeahead-on-select 事件？它将填充第一项的成本和金额，因为模板显然是静态的而不是动态的。

我尝试使用 jquery 来添加属性 typeahead-on-select 以及它会调用的函数，但这不起作用...

这是我的代码。

自动完成是项目名称的预输入控件。

addautobtn 是您在图片中看到的“新项目”按钮。它添加了一个具有预先输入、成本和金额的新项目行。

app.directive('autocomplete', function($compile) {
    return {
        restrict: 'E',
        scope: { itemName: '@' },
        template: "<input type='text' name='name' ng-model='item' typeahead='item as item.name for item in getItems() | filter:$viewValue | limitTo:4' typeahead-on-select='updateItemInputValues(item, "+getNumItems()+")' class='inputStr form-control'>",
        controller: function ( $scope, $element ) {
            $scope.getItems = function() {
                return JSON.parse(sessionStorage.getItem('items'));
            };

            $scope.updateItemInputValues = function( item, itemNumber ) {
                $('#itemCost'+itemNumber).val( item.cost.toFixed(2) );
                $('#itemAmount'+itemNumber).val( item.amount ); 
            }
        }
    }
});

app.directive('addautobtn', function($compile) {
    return {
        restrict: 'E',
        scope: { text: '@' },
        template: "<input type='button' class='btn btn-primary btn-sm' value='New Item' ng-click='add()'>",
        controller: function ( $scope, $element ) {
          $scope.add = function () {
            numItems++;
            var itemRow = document.createElement('div');
            itemRow.setAttribute( 'id', 'item'+(numItems) );
            itemRow.setAttribute( 'class', 'row itemRow' );

                var itemColTitle = document.createElement('div');
                itemColTitle.setAttribute( 'class', 'col-md-1' );
                    var title = document.createElement('h4');
                    title.setAttribute( 'id', 'itemNumber'+numItems );
                    title.setAttribute( 'class', 'variable' );
                    title.appendChild( document.createTextNode(numItems) );
                    itemColTitle.appendChild(title);

                var itemColName = document.createElement('div');
                itemColName.setAttribute( 'class', 'col-md-3 itemCol' );
                    var itemNameInput = $compile( "<autocomplete id='itemName"+numItems+"'></autocomplete>" )( $scope );

                $(itemColName).append( itemNameInput );

                var itemColCost = document.createElement('div');
                itemColCost.setAttribute( 'class', 'col-md-2 itemCol' );
                itemColCost.appendChild( createItemInput('number', 'cost', sizeTypes['numberLg']+' form-control') );

                var itemColAmount = document.createElement('div');
                itemColAmount.setAttribute( 'class', 'col-md-2 itemCol' );
                itemColAmount.appendChild( createItemInput('number', 'amount', sizeTypes['numberSm']+' form-control') );

                var deleteCol = document.createElement('div');
                deleteCol.setAttribute( 'id', 'deleteItem'+numItems );
                deleteCol.setAttribute( 'class', 'col-md-1 deleteCol' );
                deleteCol.setAttribute( 'onclick', 'deleteItem('+numItems+')' );
                    var deleteLink = document.createElement('a');
                    deleteLink.setAttribute( 'class', 'btn btn-danger btn-xs' );
                        var deleteIcon = document.createElement( 'i' );
                        deleteIcon.setAttribute( 'class', 'glyphicon glyphicon-trash' );
                    deleteLink.appendChild( deleteIcon );
                deleteCol.appendChild( deleteLink );

            itemRow.appendChild( itemColTitle );
            itemRow.appendChild( itemColName );
            itemRow.appendChild( itemColCost );
            itemRow.appendChild( itemColAmount );
            itemRow.appendChild( deleteCol );

            $("#item"+(numItems-1)).after( itemRow );
          };
        }
    };
});

Answer 1

如果是动态指令，则需要手动编译链接。像这样：

var element = angular.element('<div custom-attr></div>');
angular.element(document.body).append(element);
$compile(element)(scope);