Question

我在ASP.NET MVC App中有一个AngularJS。我的用例是在click事件中填充的手风琴。每个Item都是一个指令，在模板中我有两个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

当我点击标题时，我希望用DOM调用AngularJS路由“Index＃/ MDFDecisions”来填充下一个DIV，我得到非常奇怪的结果它得到了索引MVC Action而不是AngularJS路由。也知道我怎样才能得到预期的结果？我也愿意改进我的代码。这是我的第二个AngularJS应用程序，我正在使用这种方法。

提前致谢。

Answer 1

最后，我提出了另一种解决方案。我没有尝试在指令中获取DOM，而是使用ng-include来隐藏DIV，并将指令中的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>

从自定义指令调用角度路径

1 个答案: