ngDialog内でAngularJSディレクティブが機能しない

ngDialogを使用してポップアップ内にカスタムアコーディオンディレクティブを実装しようとしています。ngDialog内でAngularJSディレクティブが機能しない

ディレクティブコードの中にブレークポイントを設定すると、どこにもヒットしません。単に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) }); 

    }

HTML ngDialogテンプレートで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

出典

2016-08-02 user1585001