Question

我有“Pages”属性，其中包含一个“Page”数组。每个“页面”都有一个“控件”数组，显示“控件”属性。

我已经编写了Directive来为Page和Control呈现标记。控件模板有一个按钮，它应该传递控件实例（或控件的Id属性）。事件是触发但是范围/ 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>

Answer 1

如何定义隔离范围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/

基本上你需要继续传递呼叫级别。

参数未在嵌套的Angular Directive中传递给Handler

1 个答案: