Call an angular route from a custom directive

Question

I have an AngularJS inside an ASP.NET MVC App. My use case is an accordion that is populated on click event. Each Item is a directive and in the template I have two divs one showing the header the second is hidden. Clicking the header I will populate with DOM the hidden div and open it, I tried with $http I got an issue, not resolving route with # but to my MVC controller

//This is my main Angular Module

    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

When I clicking the header I would expect to populate next DIV with the DOM calling the AngularJS route "Index#/MDFDecisions", I'm getting very weird result it gets the Index MVC Action and not the AngularJS route. also Any idea how can I get my expected result? also I'm open to any improvement to my code. This is my second AngularJS App and I'm being using this approach.

Thanks in advance.

score 0 · Answer 1 · answered Dec 12 '13 at 20:56

Finally I came with a different solution. Instead of try to get DOM in the Directive I changed directive to have the hidden DIV with ng-include and change the src attribute in the Directive as scope value.

//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>

Is there a reason you are manipulating everything manually with jQuery instead of using Angular to make the changes to the DOM based on the model (`$scope`)? See [this very popular question](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) for more info. — GregL, Apr 17 '15 at 00:02

Call an angular route from a custom directive

1 Answers1