使用指令模板嵌入共享范围

Question

假设这个指令：

<validation-errors field="someField">Some errors: {{errors}}</validation-errors>

我想我可以像这样简单地创建指令函数：

    return {
        require: '^form',
        restrict: 'E',
        link: link,
        scope: {
            field: '@'
        },
        transclude: true,
        template: '<span ng-show="errors" class="alert-danger" ng-transclude></span>'
    };

    function link(scope, el, attr, ctrl, transcludeFn) {
        scope.errors = ctrl.Validator.getErrors(attr.field);
    }

但是自从Transclusion is the process of extracting a collection of DOM element from one part of the DOM and copying them to another part of the DOM, while maintaining their connection to the original AngularJS scope from where they were taken.（来自文档）以来，范围就不像我想象的那样工作了。

所以我尝试了这个可行，除了“一些错误”部分重复：

transcludeFn(function(clone, transScope) {
    scope.errors = transScope.errors = ctrl.Validator.getErrors(attr.field);
    el.append(clone);
});

如果我删除el.append(clone);，它将不起作用。

让嵌入的内容共享指令模板范围的最佳方法是什么？

Answer 1

如果你想使用指令创建错误，试试这样.

'use strict';

/* Directives */

angular.module('myApp.directives', []).
directive('errordirective', ['$compile',function($compile) {
  return {
    restrict: 'E',
    scope: {
      field: '@',
    },
    transclude: true,
    //Create some error text
    controller: function() {
      this.errorText = "Some Errors We Created";
      //Make the template available to the link fn, and make it an angular element.
      this.template = angular.element('<span class="alert-danger" ng-transclude></span>')
    },
    //Make the controller available easily
    controllerAs: 'Errors',
    //Bind the scope properties to the controller, only works with controllerAs
    bindToController: true,
    template: '<span class="alert-danger" ng-transclude></span>',
    link: function(scope, elem, attrs, ctrl, transcludefn) {
      //Replace the original element with the new one that has the error text from our controller
      transcludefn(scope, function(el) {
        var template = ctrl.template;
        var html = el.html();
        //Add the transcluded content to the template
        template.html(html);
        //Compile the template with the appropriate scope
        template = $compile(template)(scope);
        //Replace with the new template
        elem.replaceWith(template);

      });
    }

  };
}]);