有没有办法将范围传递给指令 templateUrl: 函数？

Question

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

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

当然，$scope 在此指令中不可用：

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.
            }
        }
    });

Answer 1

您需要在链接函数中加载模板才能访问范围，在此之前您只能在模板或编译中访问模板本身，请查看此处的说明：What are the benefits of a directive template function in Angularjs?

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

$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

以下是您的代码在黑暗中的一点点：

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>