Parameter not passed to Handler in nested Angular Directive

StackOverflow https://stackoverflow.com/questions/23591050

Domanda

I have "Pages" property which contains an array of "Page". Each "Page" have an array of "Control" exposed against "Controls" properties.

I have written Directive to render markup for Page and Control. Control template have a button which is supposed to pass control instance (or Id property of control.) The event is triggering but the scope/id is not coming through.

PROBLEM: I need to have either control instance or control.id value in "$scope.deleteControl" method.

Here is the code (just save it as HTML and it will run.)

    <!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>
È stato utile?

Soluzione

How you have defined your isolated scope html attribute expression and how the invocation is done with ng-click needs to be fixed.

The directive html should be

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

The invocation should be

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

to make it work.

You can also pass the control directly if you do

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

Update: For multi-level directives passing parameter was not as expected. I created a fiddle to show the approach http://jsfiddle.net/8XkHn/2/

Basically you need to keep passing the call level up.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top