我查看了有关scope
的文档,但无法绕过它。我的指令是带有隔离范围的加载覆盖。我尝试了scope: true
和scope: 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");
});
}
};
}]);
})();