Question

我有一个指令，我希望克隆一个DOM元素，它们与所有绑定完全相同。当其中一个发生变化时，另一个发生变化。那可能吗？我理解我不得不编译复制的元素，但它们是否与更改互连？

angular.module('app').directive('test', function ($compile) {
  return {
  restrict: 'A',
  link: function (scope, element, attrs) {

   angular.element(document).ready(function () {

      var $header = angular.element(XXX).clone();
      // $compile($header)(scope); // not sure about this one. it doesn't work
      var $newHeader = angular.element(YYY).append($header);

    }
  }
});

Answer 1

这是一个关于如何实现这一目标的小例子。

此示例使用带有displayContent方法的控制器，该方法在单击时显示元素的内容。

我们使用div指令在test元素内搜索带有<p>指令的现有ng-click元素，克隆它，更改其内容并将其附加到div父元素

在附加此元素副本之前，需要对其进行编译，以便Angular识别其绑定。

<强>的index.html

<!doctype html>

<html lang="en" ng-app="app">
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="SampleController as ctrl">     
    <div test>
        <p ng-click="ctrl.displayContent($event)">Dummy</div>
    </div>
</body>
</html>

<强>的script.js

angular.module('app', []);

angular.module('app').controller('SampleController', function ($scope) {

    var ctrl = this;

    ctrl.displayContent = function($event) {
        alert($event.currentTarget.innerHTML);
    }     

});

angular.module('app').directive('test', function ($compile) {
  return {
      restrict: 'A',
      link: function (scope, element, attrs) {

           // Find <p> element inside our elment with `test` directive
           var pElement = element.find('p');
           // Clone <p>
           var pElementCopy = pElement.clone();
           // Change its content
           pElementCopy.html("Foo");
           // In order ng-click to work on this copy, you must compile it
           // If you remove the following line, then ng-click won't work
           $compile(pElementCopy)(scope);

           element.append(pElementCopy)
      }
    }
});

链接到plunker：https://plnkr.co/edit/T4elaGJMgMtxX6bKJHf0?p=preview

AngularJS - 具有功能

1 个答案: