從自定義指令中調用角路由

Question

我在ASP.NET MVC應用程序中有一個AngularJS。我的使用案例是在點擊事件中填充的手風琴。每個項目是一個指令，在模板中我有兩個div，一個顯示頭，另一個隱藏。點擊標題，我將與DOM填充隱藏的div並打開它，我試着用$ HTTP我有一個問題，而不是解決與＃，但我的MVC控制器航線

//這是我的主角度模塊

window.progCheckList = angular.module("progCheckList", []); 

    progCheckList.config(["$routeProvider", function ($routeProvider) { 
     $routeProvider.when("/MainCheckList", { 
      controller: "mainCheckListCtrl", 
      templateUrl: "/AngularJSApp/ProgramCheckList/Templates/mainCheckList.html" 
     }) 
     .when("/MDFDecisions", { 
      controller: "mdfDecisionsCtrl", 
      templateUrl: "/AngularJSApp/ProgramCheckList/Templates/mdfDecisions.html" 
     }) 
     .otherwise({ redirectTo: '/MainCheckList' }); 
     } 
    ]); 

//Inside of MainCheckList I have 

    <div style="clear: both; display: block;"> 
     <check-list-item data-ng-repeat="checkList in data.ProgramCheckList.ProgramCheckLists" value="checkList"> 
     </check-list-item> 
    </div> 

//CheckListItem is a directive 

progCheckList.directive('checkListItem', function ($http) { 
    return { 
     restrict: 'E', 
     templateUrl: "/AngularJSApp/ProgramCheckList/Templates/programCheckListItem.html", 
     scope: { value: "=value" }, 
     transclude: true, 
     link: function (scope, element, attrs) { 

      element.find("button").on("click", function() { 

      }); 

      element.find(".CheckListHeader").on("click", function() { 
       if (scope.value.Action != null && scope.value.Action != "") { 
        if (element.find(".CheckListHeader").hasClass("collapsed")) { 

         $http({ method: 'GET', url: "Index#/MDFDecisions" }). 
          success(function (data, status, headers, config) { 
           console.log(element.parent().find(".CheckListHeader").parent().next()); 

           element.find(".CheckListHeader").parent().next().html(data); 

           element.find(".CheckListHeader").removeClass("collapsed"); 
           element.find(".CheckListHeader").addClass("expanded"); 

           element.find(".CheckListHeader").parent().next().show("slow"); 
          }). 
          error(function (data, status, headers, config) { 
           toastr("Unable to get action"); 
          }); 

         element.find(".CheckListHeader").parent().next().show("slow"); 
        } else if (element.find(".CheckListHeader").hasClass("expanded")) { 
         element.find(".CheckListHeader").parent().next().empty(); 

         element.find(".CheckListHeader").removeClass("expanded"); 
         element.find(".CheckListHeader").addClass("collapsed"); 

         element.find(".CheckListHeader").parent().next().hide("slow"); 
        } 
       } 
      }); 
     } 
    }; 
}); 

//The Template that I'm using for the Directive 

<div class="program-checklist" style="clear: both; vertical-align: middle; margin: 0.4em; cursor: pointer;"> 
    <div style="height: 100%; width: 100%; resize: vertical;"> 
     <div style="vertical-align: middle;"> 
      <div class="CheckListHeader collapsed" style="float: left; vertical-align: middle; height: 3.5em;"> 
       <h4>{{value.Functionality}}</h4> 
      </div> 
      <div style="float: right; vertical-align: middle; margin-right: 2em;"> 
       <button class="btn btn-inverse updateCheckList" data-ng-click="UpdateStatus(value.CPMSCheckListId)"> 
        Update Status 
       </button> 

       <img data-ng-src="{{value.IsReady && '../../Images/Checked.png' || '../../Images/UnChecked.png'}}" style="width: 36px; height: 36px; margin: 0.5em;" /> 
      </div> 
     </div> 
     <div style="clear: both; display: none; width: 100%; height: 20em; overflow: auto;"> 
     </div> 
    </div> 
</div 

當我點擊標題時，我希望用調用AngularJS路徑「Index＃/ MDFDecisions」的DOM來填充下一個DIV，結果我得到了很奇怪的結果，它得到了Index MVC Action而不是AngularJS路由。 也 任何想法如何得到我的預期結果？我也願意對我的代碼進行任何改進。這是我的第二個AngularJS應用程序，我正在使用這種方法。

在此先感謝。

Answer 1

最後我帶來了一個不同的解決方案。我沒有嘗試在指令中獲取DOM，而是改變了指令以使隱含的DIV與ng-include一起，並將指令中的src屬性更改爲範圍值。

//Updated Directive Code 
progCheckList.directive('checkListItem', function ($http) { 
return { 
    restrict: 'E', 
    templateUrl: "/AngularJSApp/ProgramCheckList/Templates/programCheckListItem.html", 
    scope: { value: "=value" }, 
    transclude: true, 
    link: function (scope, element, attrs) { 

     element.find("button").on("click", function() { 

     }); 

     element.find(".CheckListHeader").on("click", function() { 
      if (scope.value.Action != null && scope.value.Action != "") { 
       if (element.find(".CheckListHeader").hasClass("collapsed")) { 

        scope.checkListItemTemplate = "/AngularJSApp/ProgramCheckList/Templates/mdfDecisions.html"; 

        scope.$apply(); 

        element.find(".CheckListHeader").removeClass("collapsed"); 
        element.find(".CheckListHeader").addClass("expanded"); 
        element.find(".CheckListHeader").parent().next().show("slow"); 
       } else if (element.find(".CheckListHeader").hasClass("expanded")) { 
        element.find(".CheckListHeader").parent().next().empty(); 

        element.find(".CheckListHeader").removeClass("expanded"); 
        element.find(".CheckListHeader").addClass("collapsed"); 

        element.find(".CheckListHeader").parent().next().hide("slow"); 
       } 
      } 
     }); 
    } 
}; 

}）;

//Updated Directive Template 
<div class="program-checklist" style="clear: both; vertical-align: middle; margin: 0.4em; cursor: pointer;"> 
<div style="height: 100%; width: 100%; resize: vertical;"> 
    <div style="vertical-align: middle;"> 
     <div class="CheckListHeader collapsed" style="float: left; vertical-align: middle; height: 3.5em;"> 
      <h4>{{value.Functionality}}</h4> 
     </div> 
     <div style="float: right; vertical-align: middle; margin-right: 2em;"> 
      <button class="btn btn-inverse updateCheckList" data-ng-click="UpdateStatus(value.CPMSCheckListId)"> 
       Update Status 
      </button> 

      <img data-ng-src="{{value.IsReady && '../../Images/Checked.png' || '../../Images/UnChecked.png'}}" style="width: 36px; height: 36px; margin: 0.5em;" /> 
     </div> 
    </div> 
    <div style="clear: both; display: none; width: 100%; height: 30em; overflow: auto;" data-ng-include="" src="checkListItemTemplate"> 
    </div> 
</div>