如何動態添加具有自己獨特的selectahead-on-select事件的AngularJS typeahead組件？

Question

我能夠動態添加typeahead組件，但無法為其提供自己的selectahead-on-select事件。 （這部分有效）

對於第二個輸入，當從列表中選擇一個項目時，它應基於這樣的數據庫數據填充成本和金額。 （這部分無效）

如何動態添加具有自己獨特的selectahead-on-select事件的AngularJS typeahead組件？ 因為模板顯然是靜態的而不是動態的，所以它將填充第一項的成本和金額。

我嘗試使用jquery來添加屬性，即選擇時鍵入，並帶有它會調用的函數，但這沒有用...

這是我的代碼。

自動完成是項目名稱的預輸入控件。

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);