AngularJS指令不能在ngDialog中工作

问题描述：

我想在一个弹出窗口中使用ngDialog实现一个自定义的accordion指令。AngularJS指令不能在ngDialog中工作

当我在指令代码中设置一个断点时，它不会触及任何位置，只是绕过整个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>

当我点击按钮时，弹出窗口出现，m y obj.Name值存在，我也可以看到collapseData的内容，我只是为了检查数据是否在范围中出现而写出来的。但是自定义手风琴只是在弹出式模板中显示。在任何地方都没有javascript错误，指令只是不渲染。

任何帮助，非常感谢。 JD

答

已解决。我在指令设置中有不正确的'restrict'值...应该是E for元素。

AngularJS指令不能在ngDialog中工作

相关推荐