隔离父母的范围会阻止与孩子的交流

Kousha

我有以下标记:

<div class="row" loader="loader" address-book>
    <!-- Loading complete - this should show result -->
    <div loader-success></div>

    <!-- Loading failed - this should show some error -->
    <div loader-failure>Failure</div>
</div>

address-book是主要的应用,而loader仅仅是在页面加载时显示动画。地址簿的内容将进入loader-success,并且失败消息(即,如果找不到内容)将进入内部loader-failure

所以我的想法是使用以下指令:

app.directive('loader', function($compile, $timeout)
{
    return {
        restrict: 'AE',
        scope: {
            loader: '&'
        },
        transclude: true,
        template: 
            '<div class="row" ng-if="loading">' + 
            '   <div class="small-15 columns text-center">' +
            '       <i class="fa fa-spin fa-circle-o-notch"></i>' +
            '   </div>' +
            '</div>' + 
            '<div ng-transclude></div>',
        link: function(scope, element, attrs)
        {
            scope.loading = true;
            scope.failure = false;
            scope.success = false;

            scope.$watch('loader', function(fn) {
                if (_.isFunction(fn)) {
                    scope.loader()
                    .then(function(){
                        scope.success = true;
                        scope.loading = false;
                        scope.$safeApply();
                    })
                    .catch(function() {
                        scope.failure = true;
                        scope.loading = false;
                        scope.$safeApply();
                    });
                }
            });
        }
    };
}); 

那套scope.loader的诺言在哪儿在地址簿尝试获取内容后,将解决/拒绝承诺。$qaddress-book

对于成功/失败模块,我有:

app.directive('loaderFailure', function()
{
    return {
        restrict: 'AE',
        link: function(scope, element, attrs)
        {
            element.hide();
            scope.$watch('failure', function(value) {
                if (_.isTrue(value)) {
                    element.show();
                }
            });
        }
    };
});

app.directive('loaderSuccess', function()
{
    return {
        restrict: 'AE',
        link: function(scope, element, attrs)
        {
            element.hide();
            scope.$watch('success', function(value) {
                if (_.isTrue(value)) {
                    element.show();
                }
            });
        }
    };
});

然而,由于在隔离范围loader,这两个孩子的范围loader-success,并loader-failure不再能读取父的。我不能使用$compileon,loader因为那样会把范围从地址簿的应用程序中删除。

我能做些什么?

科斯蒂克露台

您可以使用事件。如果您想将一些日期从孩子发送给父母使用$scope.$emit

从父母到孩子$scope.$broadcast-可能会对绩效产生负面影响

当您要在松散耦合的组件之间进行通信时,使用事件是一种很好的方法。

查看有关事件的更多信息:

https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope#$ emit

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

隔离父母的范围会阻止与孩子的交流

来自分类Dev

为什么声明隔离范围会阻止$ emit事件被听到?

来自分类Dev

阻止孩子遮盖父母的轮廓?

来自分类Dev

从孩子访问父母的名字范围

来自分类Dev

从孩子访问父母的名字范围

来自分类Dev

角度2-父母和孩子通过服务进行交流

来自分类Dev

Angular2 - 父母和孩子通过服务进行交流

来自分类Dev

使用ReactJS中的逆向数据流,让孩子与父母进行交流的好方法是什么?

来自分类Dev

过滤掉孩子后,如何阻止父母显示?

来自分类Dev

使用动态身高父母时如何阻止孩子修剪?

来自分类Dev

交流儿童父母的ReactJs

来自分类Dev

儿童与父母之间的交流

来自分类Dev

修改孩子的原型会影响父母的原型吗?

来自分类Dev

为什么父母的列表样式图像会覆盖孩子的图像?

来自分类Dev

为什么父母的孩子会复制父母的背景图片?

来自分类Dev

ActiveRecord:在特定日期让没有孩子的父母成为父母的范围

来自分类Dev

如果孩子不适合父母,则CSS会平均划分孩子的宽度

来自分类Dev

Bootstrap 4 - 当父母身高比孩子长时,孩子会自动对齐中心(垂直)

来自分类Dev

单击孩子时,孩子和父母会触发两个不同的事件

来自分类Dev

父母联谊会的条件范围,使所有子女

来自分类Dev

为什么父母的最小身高不能阻止100%身高的孩子崩溃

来自分类Dev

CSS:阻止第二个孩子(段落)扩大父母的宽度

来自分类Dev

显示隐形父母的孩子

来自分类Dev

让孩子与父母的点击事件

来自分类Dev

父母对孩子的背景

来自分类Dev

父母/孩子组合框

来自分类Dev

父母对孩子的背景

来自分类Dev

让孩子修改其父母

来自分类Dev

固定父母身后的孩子

Related 相关文章

热门标签

归档