angularjs - 将父指令属性传递给子指令属性

Question

我正在为客户可以使用的库创建指令。我需要让客户为指令创建自己的模板，并将该模板的绝对 url 值传递到我的指令中。我的一个指令将在其中包含另一个自定义指令，它的模板将根据父指令的属性之一的值确定。下面是一个例子:

<parent-dir menu-template="this.html" item-template="that.html"></parent-dir>

我有这个指令的模板，如下所示:

<ul style="list: none" ng-repeat="item in menu">
    <child-dir template="{{itemTemplate}}"></child-dir>
</ul>

我的指令如下所示:

angular.module('myApp')
.directive('parentDir', function () {        
    return {
        restrict: 'E',
        scope: {
            menuTemplate: '@',
            itemTemplate: '@',
            menuType: '@',
            menuName: '@',
            menuId: '@',
        },
        templateUrl: function (element, attrs) {
            alert('Scope: ' + attrs.menuTemplate);
            return attrs.menuTemplate;
        },
        controller: function ($scope, $element, $attrs) {
            $scope.defaultSubmit = false;
            alert('Menu: '+$attrs.menuTemplate);
            alert('Item: ' + $attrs.itemTemplate);
            $scope.itemTemplate = $attrs.itemTemplate;
            if ($attrs.$attr.hasOwnProperty('defaultSubmit')) {
                alert('It does');
                $scope.defaultSubmit = true;   
            }               
        }
    };
})
.directive('childDir', function () {
    return {
        restrict: 'E',
        require: '^parentDir',
        templateUrl: function (element, attrs) {
            alert('Item Template: ' + attrs.template);
            return attrs.template;
        },
        controller: function ($scope, $element, $attrs) {                
            $scope.job;
            alert('Under job: ' + $scope.itemTemplate);
        }
    };
});

我没有展示所有的代码，但这是我问题的主要部分。当我运行它时，我一直在 childDir 上为模板未定义。

从 parentDir 永久保留 itemTemplate 的值以便 childDir 可以将其用作模板的最佳做法是什么？

Answer 1

您遇到问题的原因是生成 templateUrl 的函数在 scope 之前运行已分配给您的指令 - 在可以替换插值数据之前必须完成的操作。

换句话说:在这一点上 templateUrl函数运行后，template的值属性仍然是 "{{itemTemplate}}" .在指令的链接(准确地说是 preLink)函数运行之前，情况将一直如此。

我创建了一个 plunker 来演示这一点 here .一定要打开控制台。你会看到 templateUrl在父链接函数和子链接函数之前运行。

那么你会怎么做呢？

幸运的是，angular 提供了一个 $templateRequest允许您以与使用 templateUrl 相同的方式请求模板的服务(它还使用方便的 $templateCache)。

将此代码放在您的链接函数中:

    $templateRequest(attrs.template)
    .then(function (tplString){
      // compile the template then link the result with the scope.
      contents = $compile(tplString)(scope);
      // Insert the compiled, linked element into the DOM
      elem.append(contents);
    })

然后，您可以删除对 template 的任何引用。在指令定义对象中，一旦属性被插入，这将安全运行。