翻译范围是否有可能访问指令范围

时间:2016-02-09 18:21:26

标签: angularjs angularjs-directive angularjs-ng-transclude transclusion

继续讨论 Confused about Angularjs transcluded and isolate scopes & bindings

<controller>

  <directive>

     transcluded html

  </directive>

</controller>

通过应用程序中的上述一般结构,链接讨论中暗示,转换范围基本上是从父范围(控制器)继承的,并且转换范围不能访问指令范围。解释这一点的文章是http://angular-tips.com/blog/2014/03/transclusion-and-scopes/

我的问题是 - 翻译范围是否可以访问指令范围?

根据上面的文章,如果我们在指令的link函数中使用transclude函数并将代码写为:

,这应该是可能的。
transclude(scope, function(clone, scope) {
    element.append(clone);
  });

这实际上有用吗?我在我的应用程序上尝试了相同的操作,但它无法正常工作。这是我一直在使用的代码。

指令定义:

(function(){
    'use strict';

    angular.module('checkoutApp')
        .directive('wizardCard', ['shipToService','deliveryService','billingService', wizardCardDirective]);


    function wizardCardDirective(shipToService,deliveryService,billingService){
        return {
            restrict : 'E',
            scope : {
               current : '@',
               checkoutStates: '='
            },
            transclude:true,
            templateUrl: '/UsabilitySites/Cart/Checkout/app/components/shared/wizard-card.html',
            link: function(scope, element, attrs,ctrl,transclude){


                scope.bla == "ajcnasc";

                transclude(scope, function(clone, scope) {
                    element.append(clone);
              });


            }

        };
    }

})();

wizard-card.html -

<div class="wizardContainer">
   {{bla}}
</div>

范围变量范围在打开html时仅为空。 有人能告诉我为什么会这样吗?

上述问题已得到解决 更新新问题:

现在我尝试使用多插槽转换进行此操作,但它无效。

指令定义:

(function(){
    'use strict';

    angular.module('checkoutApp')
        .directive('wizardCard', [wizardCardDirective]);


    function wizardCardDirective(){
        return {
            restrict : 'E',
            scope : {
               current : '@',
               checkoutStates: '='
            },
            transclude: {
                'completed': 'completed',
                'inprogress': 'inprogress'
              },
            templateUrl: 'wizard-card.html',
            link: function(scope, element, attrs,ctrl,transclude){

                scope.bla = "ajcnasc";

                transclude(scope, function(clone, scope) {
                        element.append(clone);
                  });


            }

        };
    }

})();

wizard-card.html -

 <div class="wizardContainer">
    <div ng-transclude="completed">
    </div>

    <div ng-transclude="inprogress">
   </div>
</div>
正在使用

指令 -

<wizard-card current="shipping" checkout-states="checkoutStates">
    <completed>
        bla {{bla}}

    </completed>

    <inprogress>
        {{bla}}
    </inprogress>

</wizard-card>

这给了我一个空白和范围。$ id给了我另一个值(与指令不同)。

根据这个概念,它应该以相同的方式进行多插槽转换。但我无法弄清楚为什么它不使用此代码。

1 个答案:

答案 0 :(得分:2)

出于调试目的,您可以将{{$id}}放入模板中。如果$interpolation正常工作,那将公开范围ID。

你错误地使用了双等于==。相反,scope.bla = "ajcnasc"DEMO on JSFiddle

是否可以将已包含的元素绑定到指令范围?

是。

指令模板中使用的ng-transclude指令将绑定到指令的父作用域。但是通过使用指令自己的作用域在指令的链接函数中进行转换,可以将已转换的元素绑定到指令作用域。