Question

我正在尝试使用ngDialog在弹出窗口中实现自定义accordion指令。

当我在指令代码中设置一个断点时，它不会触及任何地方，只是绕过整个return语句。

该指令如下：

app.directive('customAccordion', function () {
    console.log("directive!!!");
    return {
        scope: {
            ngModel: '='
        },
        restrict: 'A',
        template: '<div class="panel-group" id="{{panelId}}"><div class="panel panel-default" ng-repeat-start="item in ngModel"><div class="panel-heading"><h4 class="panel-title"><a ng-click="toggleCollapsedStates($index)" href="#{{panelBaseId}}-{{$index}}">{{item.title}}</a></h4></div><div id="{{panelBaseId}}-{{$index}}" data-parent="#{{panelId}}" class="panel-collapse collapse"><div class="panel-body">{{item.content}}</div></div></div><div ng-repeat-end></div></div>',
        link: function (scope, el, attrs) {
            scope.panelBaseId = attrs.collapsePanelBodyId;
            scope.panelId = attrs.collapsePanelId;
            console.log("inside the link property!!");

            $(document).ready(function () {
                console.log("doc ready!!");
                angular.forEach(scope.ngModel, function (value, key) {
                    if (value.collapsed) {
                        $("#" + scope.panelBaseId + "-" + key).collapse('show');
                    }
                });
            });

            scope.toggleCollapsedStates = function (ind) {
                angular.forEach(scope.ngModel, function (value, key) {
                    if (key == ind) {
                        scope.ngModel[key].collapsed = !scope.ngModel[key].collapsed;
                        $("#" + scope.panelBaseId + "-" + ind).collapse('toggle');
                    }
                    else
                        scope.ngModel[key].collapsed = false;
                });
            }
        }
    };
});

单击页面上的按钮打开弹出窗口时调用的代码如下：

$scope.showPopup = function (obj) {
        $scope.obj= obj;

        actionsService.actionsAPI().get({ Name: obj.UserName }, function (data) {
            if (data.Success) {
                $scope.currentUserName = userContext.CurrentUserName;
                $scope.collapseData = [];

                data.Contents.forEach(function(action) {
                    $scope.collapseData.push({
                        title: action.Name,
                        content: '<p>' +
                            action.Action_Type_Name +
                            ' - ' +
                            action.FormattedAction_Date +
                            '</p><p>' +
                            action.Formatted_Action_Description +
                            '</p>',
                        collapsed: false
                    });
                });

                ngDialog.open({
                    template: 'Views/popup.html',
                    scope: $scope
                });
            }
            else {
                $scope.message = "Unexpected error: " + data.Message;
            }
        }, function (error) { $scope.message = "Unexpected error: " + JSON.stringify(error.data) });

    }

ngDialog模板中的HTML，即popup.html，如下所示：

<div>
    <h2>{{obj.Name}}</h2>
    {{collapseData}}
    <custom-accordion ng-model="collapseData" collapse-panel-id="collapse-panel" collapse-panel-body-id="collapse-panel-body"/>
</div>

当我单击按钮时，会出现弹出窗口，我的obj.Name值存在，我也可以看到collapseData的内容，我写这个只是为了检查数据是否在范围内看到。但是自定义手风琴只是在弹出模板中出现。在任何地方都没有javascript错误，该指令不会呈现。

非常感谢任何帮助。 JD

Answer 1

解决。我有不正确的限制＆＃39;指令设置中的值...应该是元素的E。

AngularJS指令在ngDialog

1 个答案: