嵌套Angular Directive中的參數未傳遞給Handler

我擁有包含「Page」數組的「Pages」屬性。每個「頁面」都有一個暴露於「控件」屬性的「控件」數組。嵌套Angular Directive中的參數未傳遞給Handler

我已經編寫了指令來爲頁面和控件顯示標記。控件模板有一個按鈕，它應該傳遞控件實例（或控件的Id屬性）。事件正在觸發，但範圍/標識未通過。

問題：我需要在「$ scope.deleteControl」方法中有控制實例或control.id值。

下面是代碼（只是把它保存爲HTML，它將會運行。）

<!DOCTYPE html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <title>AngularJS Tree demo</title> 

    </head> 
    <body ng-app="wizardApp"> 

     <script type="text/ng-template" id="page.html"> 
      <div class="tree-node"> 
       <div class="tree-node-content"> 
        <h4 class="clearfix pull-left">{{page.title}}</h4> 
        <div class="btn-group pull-right" > 
         <button class="glow left" title="Add new page" data-nodrag ng-click="addNewPage()">+ Add Page</button> 
         <button class="glow right" title="Delete page" data-nodrag ng-click="deletePage()">X</button> 
        </div> 
       </div> 
      </div> 
      <br /> 
      <ol ui-tree-nodes="" ng-model="page.controls" ng-class="{hidden: collapsed}"> 
       <li ng-repeat="control in page.controls" ui-tree-node> 
        <control-Ui control="control" on-delete-control="deleteControl('{{ control.id }}')"></control-Ui> 
       </li> 
      </ol> 
     </script> 

     <script type="text/ng-template" id="control.html"> 
      Control markup over here... {{ control.id }} ~ {{ control.ctrltype }} 
      <button class="glow right" title="Delete control" ng-click="deleteControl()">Delete Ctrl</button> 
     </script> 

     <div class="container" ng-controller="wizardController"> 

      <ol ui-tree-nodes="" ng-model="pages"> 
       <li ng-repeat="page in pages" ui-tree-node> 
        <page-Control page="page" on-add-new-page="addNewPage(this)" on-delete-page="deletePage(this)" on-delete-control="deleteControl()"></page-Control> 
       </li> 
      </ol> 

     </div> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script> 

    <script> 
    angular 
     .module('wizardApp', []) 
     .directive('pageControl', function() { 
      return { 
       restrict: 'E', 
       scope: { page: '=', 'deletePage': '&onDeletePage', 'addNewPage': '&onAddNewPage', 'deleteControl': '&onDeleteControl' }, 
       //template: 'something ~ {{ page.title }} ~ {{ page.id }}' 
       templateUrl: 'page.html' 
      }; 
     }) 
     .directive('controlUi', function() { 
      return { 
       restrict: 'E', 
       scope: { control: '=', 'deleteControl': '&onDeleteControl' }, 
       templateUrl: 'control.html' 
      }; 
     }) 
     .controller('wizardController', ['$scope', function ($scope) { // function referenced by the drop target 

      $scope.pages = [{ 
       "id": 1, 
       "title": "Page 1", 
       "ctrltype": "page", 
       "controls": [ 
        { "id": 10, "ctrltype": 'textbox' }, 
        { "id": 20, "ctrltype": 'dropdown' } 
       ] 
      }]; 

      $scope.deletePage = function (pg) { 
       alert('Page deleted - WORKS FINE'); 
      }; 

      $scope.addNewPage = function (scope) { 
       alert('Page added - WORKS FINE'); 
      }; 

      $scope.deleteControl = function (ctrl) { 
       alert('Delete invoked - NOT WORKING FINE'); // Expecting to pass the Id of control i.e. 10 
       alert(ctrl.id + ' ~ ' + ctrl.ctrltype); 
      }; 

     }]); 
    </script> 

    </body> 
    </html>

來源

2014-05-11 Ankur Nigam

你如何定義你的隔離範圍HTML屬性的表達，以及如何調用完成與被固定ng-click需求。

該指令HTML應該是

<control-Ui control="control" on-delete-control="deleteControl(controlId)"></control-Ui>

調用應該是

ng-click="deleteControl({controlId:control.id})"

，使其工作。

您也可以通過控制直接，如果你做

ng-click="deleteControl({controlId:control})"

更新：對於傳遞參數多層次的指令不符合預期。我創建了一個小提琴來展示這個方法http://jsfiddle.net/8XkHn/2/

基本上你需要保持傳遞級別。

來源

2014-05-11 09:59:38 Chandermani

做了您所建議的更改，無法正常工作。你能在你的最後得到它嗎？如果是的話，你能分享一下嗎？ –

@AnkurNigam看到我更新的答案。 – Chandermani

感謝您的解決。 –

嵌套Angular Directive中的參數未傳遞給Handler

回答

相關問題