Question

我有一个简单的指令，它会重复两次被转换的内容。像这样。

link: function (scope, element, attrs, controller, transclude) {

    transclude(scope.$parent, function(clone) {
        element.find('[transclude-main]').replaceWith(clone);
    });

    transclude(scope.$parent, function(clone) {
        element.find('[transclude-overflow]').replaceWith(clone);
    });

});

这主要是按预期工作，但如果内容包含表格，那么我最终会得到两个同名的表格。

更重要的是，我的主页控制器（客户）只引用其中一个表单（customers.myForm），所以如果我尝试重置表单或调用任何其他表单控制器函数，显然只有其中一个表单发生了变化。 / p>

所以，我试图修改我的代码以查找表单并将表单名称更改为新的，如下所示。

link: function (scope, element, attrs, controller, transclude) {

    transclude(scope.$parent, function(clone) {
        element.find('[transclude-main]').replaceWith(clone);
    });

    transclude(scope.$parent, function(clone) {

        clone.find('FORM').each(function() {
            $(this).attr('name', $(this).attr('name') + '2');
        });
        element.find('[transclude-overflow]').replaceWith(clone);

    });

});

这确实为我修改了HTML，最终得到了两种形式 - myForm和myForm2。

问题是我的主控制器中仍然只有一个对myForm的引用。第一个有效但第二个无效。我只能假设它们是以某种方式针对范围编译的。$ parent在我搞乱克隆之前我已经进入了transclude函数？如果是这样，我不确定如何解决它。

修改

在这里添加了一个plunkr：

https://plnkr.co/edit/XE7REjJRShw43cpfJCh2

如果你打开一个开发控制台，你会发现我使用console.log来写出myForm和myForm2的内容，它应该是我第二个工具栏中表单的两个副本。 myForm2不存在，我怀疑这是因为它在克隆之前已经针对父作用域进行了编译。

Answer 1

所以这里有一个吸尘器，我瘦身得到了你想要做的事情：https://plnkr.co/edit/8VxNPVmeLNLKyaQNReM3?p=preview

请特别注意以下几行：

HTML：

  <toolbar name="myForm" form-one="myForm1" form-two="myForm2">
    <form name="myForm" submit="appController.submit()">
      Search:<br />
      <input type="text" ng-model="appController.searchText" />
    </form>
  </toolbar>

请注意，两个name属性都指向同一个字符串"myForm"。 form-one和form-two是普通的双向绑定，可以绑定到您选择的作用域属性，在我的示例中为myForm1和myForm2。

JS：

双向绑定定义

    scope: {
      formOne: '=',
      formTwo: '='
    },

并将两个新表单绑定到相应的范围属性：

    link: function (scope, element, attrs, controller, transclude) {

        var parent = scope;

        transclude(function(clone, scope) {
            element.find('[transclude-main]').replaceWith(clone);
            var unwatch = scope.$watch(attrs.name, function(form) {
              if (form) {
                parent.formOne = form;
                unwatch();
              }
            });
        });

        transclude(function(clone, scope) {
            element.find('[transclude-overflow]').replaceWith(clone);
            var unwatch = scope.$watch(attrs.name, function(form) {
              if (form) {
                parent.formTwo = form;
                unwatch();
              }
            });
        });

回顾您的代码，此控制台console.log("myForm", $scope.myForm2)打印undefined，因为有角度form指令are not dynamic。因此，手动查找html元素并将名称从myForm更改为myForm2将不会更改绑定到范围的表单的名称，除非尚未编译html。但是the clone passed to transclude has been freshly compiled。

Transclude函数需要正确修改克隆

1 个答案: