ng-click指令未传递所需参数

时间:2015-06-22 15:45:02

标签: angularjs parameter-passing

我有以下角度代码:(这是一个使用以下js库的模态弹出菜单:http://scruffles.github.io/BootstrapModalPopover/)。

 TITLE1<---50px--> |  <---50px--> TITLE2
                (centre)

问题在于这段特殊的代码:

<div ng-repeat="purchasedItem in purchased" class="row item_summary">
    <!-- edited for brevity -->
     <div id="{{purchasedItem.code}}-popover" data-product-id="{{purchasedItem.code}}" class="popover" style="display: none;">
       <div class="arrow"></div>
       <h3 class="popover-title" style="display: none;"></h3>
       <div class="popover-content">
         <div class='popover-menu-left'>
           <button class="btn btn-sm btn-danger" ng-click='purchasedItems.removePurchasedItem(purchasedItem)'>Verwijderen</button><br>
         </div>
         <div class='popover-menu-right-template'>
           <div class='number-content' style="display: none;">
            <div ng-controller="numpadCtrl as numpad" class="numpad">
                 <!-- edited for brevity -->
                 <input type="button" class="btn btn-sm" value="enter" data-item-id='{{purchasedItem.code}}' ng-click="numpad.flushNumber(purchasedItem.code)"></input>
            </div>
           </div>
         </div>
         <div class='popover-menu-right-content'>
         </div>
       </div>
     </div>
</div>

添加了data-item-id属性只是为了查看我是否可以检索代码 - 这很好用!但是当我在flushNumber函数中设置断点时,传递的参数是未定义的。

numpad控制器的代码如下(它还没有真正做任何事情)

<input type="button" class="btn btn-sm" value="enter" data-item-id='{{purchasedItem.code}}' ng-click="numpad.flushNumber(purchasedItem.code)"></input>

唯一可能是线索的是注入numpad控制器的$ scope是null - 我对angular的了解太少,无法进行任何真正的调试。有人能指出我正确的方向吗?

1 个答案:

答案 0 :(得分:0)

这是一个有效的JSFiddle,你有什么AngularJS版本? 自{1}以来controller as被引入它之前无法使用。

HMTL:

<div ng-app ng-controller="FirstCtrl">

    {{purchasedItem}}

    <div ng-controller="numpadCtrl as numpad" class="numpad">
        <!-- edited for brevity -->
        <input type="button" class="btn btn-sm" value="enter" data-item-id='{{purchasedItem.code}}' ng-click="numpad.flushNumber(purchasedItem.code)"></input>
    </div>
</div>

JS:

function FirstCtrl($scope) {
    $scope.purchasedItem = {
        code: 'hello'
    };
}

function numpadCtrl($scope) {
    this.flushNumber = function (code) {
        console.log(code);
    }
}