有没有办法将范围传递给指令 templateUrl: 函数? [英] Is there a way to pass the scope to a directive templateUrl: function?

问题描述

我有一个指令，我在循环中调用它.循环中的每一项都有一个 FieldTypeId 属性，根据 FieldTypeId 的值，我想换出模板的 URL.我觉得这是一种更好的多态方法，而不是在 html 中执行 ng-switch 语句.

<div 属性输入></div>

当然，$scope 在该指令中不可用:

editStudentAccountModule.directive('attributeInput', function () {返回 {限制:AE"，templateUrl: function () {//var 属性 = $scope.attributes[$scope.$index];如果(属性.FieldTypeId == 1){返回'../Templates/dropdown.html';} else if (attribute.FieldTypeId == 2) {返回'../Templates/radio.html';}//等等.}}});

解决方案

您需要在链接函数中加载模板才能访问作用域，在此之前您只能访问任一模板中的模板本身或者编译，查看这里的文章:Angularjs 中的指令模板函数有什么好处?

如果您曾经直接使用过 $compile 服务，这很明显.当您在某个 DOM 上调用 $compile 时，它​​会返回链接函数，然后您调用该函数传递一个范围以供执行.因此，当您从这个角度来看它时，很明显，在调用 compile 并且返回链接函数然后使用作用域调用之前，您不会拥有作用域......它看起来像这样:

$compile("<div ng-repeat='thing in things'></div>")({things:['thing1','thing2']});//正常情况下你会在这里传递一个范围对象，但它真的可以是任何东西

这里有一些暗中刺伤你的代码:

editStudentAccountModule.directive('attributeInput', function () {返回 {限制:AE"，范围:{信息:="}，链接:功能(范围){var templateToUse = '../Templates/default.html';if (scope.info.FieldTypeId == 1) {templateToUse '../Templates/dropdown.html';} else if (scope.info.FieldTypeId == 2) {templateToUse '../Templates/radio.html';}//等等.scope.myTemplate = templateToUse;},模板:"<div ng-include='myTemplate'></div>";}});<div ng-repeat="属性中的项目"><div attribute-input info="item"></div>

I have a directive that I'm calling with in a loop. Each item in the loop has a FieldTypeId attribute, and depending on the value of FieldTypeId, I want to swap out the URL of the template. I feel that this is a better and polymorphic approach rather than doing an ng-switch statement in the html.

<div ng-repeat="item in attributes">
  <div attribute-input></div>
</div>

Of course, the $scope isn't available in this directive:

editStudentAccountModule.directive('attributeInput', function () {
        return {
            restrict: "AE",
            templateUrl: function () { // 
               var attribute = $scope.attributes[$scope.$index];
               if (attribute.FieldTypeId == 1) {
                 return '../Templates/dropdown.html';
               } else if (attribute.FieldTypeId == 2) {
                 return '../Templates/radio.html';
               } // etc.
            }
        }
    });

解决方案

You would need to load the template within the link function in order to have access to the scope, before that you just have access to the template itself in either template or compile, check out the write up here: What are the benefits of a directive template function in Angularjs?

This is obvious if you've ever actually used the $compile service directly. When you call $compile on some DOM it returns the link function which you then call passing a scope along for it to execute on. So when you see it from that perspective it's sort of obvious that you won't have the scope until the compile has been called and the link function is returned and then called with the scope... it looks something like this:

$compile("<div ng-repeat='thing in things'></div>")({things:['thing1','thing2']});//Normally you would pass a scope object in here but it can really be whatever

Here's a bit of stab in the dark at your code:

editStudentAccountModule.directive('attributeInput', function () {
        return {
            restrict: "AE",
            scope:{info:"="},
            link: function(scope){
              var templateToUse = '../Templates/default.html';
              if (scope.info.FieldTypeId == 1) {
                templateToUse '../Templates/dropdown.html';
              } else if (scope.info.FieldTypeId == 2) {
                templateToUse '../Templates/radio.html';
              } // etc.
              scope.myTemplate = templateToUse;
            },
            template:"<div ng-include='myTemplate'></div>";
        }
    });



<div ng-repeat="item in attributes">
  <div attribute-input info="item"></div>
</div>

这篇关于有没有办法将范围传递给指令 templateUrl: 函数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！