有没有一种方法来传递范围，指令templateUrl：功能？

问题描述

我有我在循环中调用指令。在循环的每个项目都有一个FieldTypeId属性，并且根据FieldTypeId的值，我想换出模板的URL。我觉得这是一个更好的多态方法，而不是在HTML中做一个NG-switch语句。

 ＆LT; D​​IV NG重复=项属性＆GT;
  ＆LT; D​​IV属性输入＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

当然， $范围不可用这个指令：

  editStudentAccountModule.directive（'attributeInput'，函数（）{
        返回{
            限制：AE，
            templateUrl：功能（）{//
               var属性= $ scope.attributes [$ $范围指标。]
               如果（attribute.FieldTypeId == 1）{
                 返回'../Templates/dropdown.html';
               }否则如果（attribute.FieldTypeId == 2）{
                 返回'../Templates/radio.html';
               } //等等。
            }
        }
    }）;
 

解决方案

您需要在链接功能中加载模板，以访问范围，在此之前，你只需要访问模板本身在任何模板或编译，看看这里写了：What在Angularjs指令模板函数的好处是什么？

如果你曾经实际使用的$直接编译服务，这是显而易见的。当你调用$一些DOM编译它返回的链接功能，你再调用传递范围沿它来执行的。所以，当你从这个角度看它这有点明显，你不会有范围的，直到编译已经调用了返回链接功能，然后调用的范围......它看起来是这样的：

  $编译（＆LT; D​​IV NG重复='的事情的东西'＆GT;＆LT; / DIV＆gt;中）（{事情：['thing1'，'thing2'] }）; //通常你会传递一个范围对象在这里，但它确实能是什么
 

下面是一个在黑暗中刺一点在你的code：

  editStudentAccountModule.directive（'attributeInput'，函数（）{
        返回{
            限制：AE，
            适用范围：{信息：=}，
            链接：功能（范围）{
              VAR templateToUse ='../Templates/default.html';
              如果（scope.info.FieldTypeId == 1）{
                templateToUse'../Templates/dropdown.html';
              }否则如果（scope.info.FieldTypeId == 2）{
                templateToUse'../Templates/radio.html';
              } //等等。
              scope.myTemplate = templateToUse;
            }，
            模板：＆LT; D​​IV NG-包括='MyTemplate的'＆GT;＆LT; / DIV＆gt;中;
        }
    }）;＆LT; D​​IV NG重复=项属性＆GT;
  ＆LT; D​​IV属性输入信息=项＆GT;＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

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：功能？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！