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

來源

2016-08-02 user1585001

已解決。我在指令設置中有不正確的'restrict'值...應該是E for元素。

來源

2016-08-03 15:16:33 user1585001

AngularJS指令不能在ngDialog中工作

回答

相關問題