我可以将此隔离范围指令与我的父范围一起使用吗?

时间:2016-11-18 08:28:46

标签: angularjs

我查看了有关scope的文档,但无法绕过它。我的指令是带有隔离范围的加载覆盖。我尝试了scope: truescope: false,但都没有达到预期的效果。最重要的是,我读到scope: {}被认为是最佳做法。

我了解您可以通过@=将值传递到隔离范围,但这不是我需要的(我认为?)。我需要的是在点击面包屑时将我的指令(=覆盖图)添加到父作用域。

tl; dr :当我使用面包屑导航时,我的叠加层不会显示。

这是HTML:

<div id="myApp">
            <ui-breadcrumbs template-url="Scripts/app/uiBreadcrumbs.tpl.html" displayname-property="data.breadcrumbLabel" abstract-proxy-property="data.breadcrumbProxy"></ui-breadcrumbs>

            <div loading-Overlay></div> **This is my isolated scope**

            <div id="MainBody" ui-view="main">
                @RenderBody()
            </div>
</div>

这是指令:

(function () {
    "use strict";
    angular
        .module("myApp")
        .directive("loadingOverlay", ["$http", "$timeout",
            function ($http, $timeout) {
                return {
                    restrict: "A",
                    replace: true,
                    templateUrl: "./Scripts/app/loading.overlay.html",
                    scope: {},
                    link: function (scope, element) {

                            scope.isRouteLoading = false;
                            scope.isRouteStillLoading = false;

                            scope.$on('$stateChangeStart', function () {
                                scope.isRouteStillLoading = true;
                                scope.isRouteLoading = true;
                                element.addClass("show");
                            });
                            scope.$on('$stateChangeSuccess', function () {
                                scope.isRouteStillLoading = false;
                                scope.isRouteLoading = false;
                                $timeout(function () {
                                    if (scope.isRouteStillLoading)
                                        scope.isRouteLoading = true;
                                    element.removeClass("show");
                                }, 500);
                            });

                            scope.$watch(scope.isRouteLoading,
                                function (value) {
                                    return value ? element.addClass("show") : element.removeClass("show");
                                });
                       }
                };
            }]);

})();

0 个答案:

没有答案