Làm cách nào tôi có thể tự động thêm một lệnh trong AngularJS?

Tôi có một phiên bản rất sôi nổi về những gì tôi đang làm có vấn đề.

Tôi có một đơn giản directive. Bất cứ khi nào bạn nhấp vào một yếu tố, nó sẽ thêm một yếu tố khác. Tuy nhiên, nó cần được biên dịch trước để hiển thị chính xác.

Nghiên cứu của tôi đã dẫn tôi đến $compile. Nhưng tất cả các ví dụ sử dụng một cấu trúc phức tạp mà tôi không thực sự biết cách áp dụng ở đây.

Câu đố có tại đây: http://jsfiddle.net/paulocoelho/fBjbP/1/

Và JS ở đây:

var module = angular.module('testApp', [])
    .directive('test', function () {
    return {
        restrict: 'E',
        template: '<p>{{text}}</p>',
        scope: {
            text: '@text'
        },
        link:function(scope,element){
            $( element ).click(function(){
                // TODO: This does not do what it's supposed to :(
                $(this).parent().append("<test text='n'></test>");
            });
        }
    };
});

Giải pháp của Josh David Miller: http://jsfiddle.net/paulocoelho/fBjbP/2/

Bạn có rất nhiều jQuery vô nghĩa trong đó, nhưng dịch vụ $ compile thực sự siêu đơn giản trong trường hợp này:

.directive( 'test', function ( $compile ) {
  return {
    restrict: 'E',
    scope: { text: '@' },
    template: '<p ng-click="add()">{{text}}</p>',
    controller: function ( $scope, $element ) {
      $scope.add = function () {
        var el = $compile( "<test text='n'></test>" )( $scope );
        $element.parent().append( el );
      };
    }
  };
});

Bạn sẽ nhận thấy tôi đã cấu trúc lại chỉ thị của bạn để tuân theo một số thực tiễn tốt nhất. Hãy cho tôi biết nếu bạn có câu hỏi về bất kỳ trong số đó.

Ngoài ví dụ hoàn hảo của Riceball LEE về việc thêm một chỉ thị phần tử mới

newElement = $compile("<div my-directive='n'></div>")($scope)
$element.parent().append(newElement)

Thêm một chỉ thị thuộc tính mới vào phần tử tồn tại có thể được thực hiện bằng cách này:

Giả sử bạn muốn thêm nhanh my-directivechóng vào spanphần tử.

template: '<div>Hello <span>World</span></div>'

link: ($scope, $element, $attrs) ->

  span = $element.find('span').clone()
  span.attr('my-directive', 'my-directive')
  span = $compile(span)($scope)
  $element.find('span').replaceWith span

Mong rằng sẽ giúp.

Tự động thêm các chỉ thị trên angularjs có hai kiểu:

Thêm một lệnh angularjs vào một lệnh khác

• chèn một phần tử mới (chỉ thị)
• chèn một thuộc tính mới (chỉ thị) cho phần tử

chèn một phần tử mới (chỉ thị)

nó đơn giản Và bạn có thể sử dụng trong "liên kết" hoặc "biên dịch".

var newElement = $compile( "<div my-diretive='n'></div>" )( $scope );
$element.parent().append( newElement );

chèn một thuộc tính mới cho phần tử

Thật khó khăn và khiến tôi đau đầu trong vòng hai ngày.

Sử dụng "$ compile" sẽ gây ra lỗi đệ quy nghiêm trọng !! Có lẽ nó nên bỏ qua chỉ thị hiện tại khi biên dịch lại phần tử.

$element.$set("myDirective", "expression");
var newElement = $compile( $element )( $scope ); // critical recursive error.
var newElement = angular.copy(element);          // the same error too.
$element.replaceWith( newElement );

Vì vậy, tôi phải tìm cách gọi hàm "liên kết" chỉ thị. Rất khó để có được các phương thức hữu ích được ẩn sâu bên trong các bao đóng.

compile: (tElement, tAttrs, transclude) ->
   links = []
   myDirectiveLink = $injector.get('myDirective'+'Directive')[0] #this is the way
   links.push myDirectiveLink
   myAnotherDirectiveLink = ($scope, $element, attrs) ->
       #....
   links.push myAnotherDirectiveLink
   return (scope, elm, attrs, ctrl) ->
       for link in links
           link(scope, elm, attrs, ctrl)       

Bây giờ, nó hoạt động tốt.

function addAttr(scope, el, attrName, attrValue) {
  el.replaceWith($compile(el.clone().attr(attrName, attrValue))(scope));
}

Câu trả lời được chấp nhận bởi Josh David Miller hoạt động rất tốt nếu bạn đang cố gắng tự động thêm một lệnh sử dụng nội tuyến template. Tuy nhiên nếu chỉ thị của bạn tận dụng templateUrlcâu trả lời của anh ta sẽ không hiệu quả. Đây là những gì làm việc cho tôi:

.directive('helperModal', [, "$compile", "$timeout", function ($compile, $timeout) {
    return {
        restrict: 'E',
        replace: true,
        scope: {}, 
        templateUrl: "app/views/modal.html",
        link: function (scope, element, attrs) {
            scope.modalTitle = attrs.modaltitle;
            scope.modalContentDirective = attrs.modalcontentdirective;
        },
        controller: function ($scope, $element, $attrs) {
            if ($attrs.modalcontentdirective != undefined && $attrs.modalcontentdirective != '') {
                var el = $compile($attrs.modalcontentdirective)($scope);
                $timeout(function () {
                    $scope.$digest();
                    $element.find('.modal-body').append(el);
                }, 0);
            }
        }
    }
}]);

Josh David Miller là chính xác.

PCoelho, Trong trường hợp bạn đang tự hỏi điều gì $compileđằng sau hậu trường và cách tạo ra HTML từ chỉ thị, vui lòng xem bên dưới

Các $compiledịch vụ biên dịch các đoạn HTML ( "< test text='n' >< / test >") trong đó bao gồm các chỉ thị ( "test" như một yếu tố) và tạo ra một hàm. Hàm này sau đó có thể được thực thi với một phạm vi để lấy "đầu ra HTML từ một lệnh".

var compileFunction = $compile("< test text='n' > < / test >");
var HtmlOutputFromDirective = compileFunction($scope);

Thêm chi tiết với các mẫu mã đầy đủ tại đây: http://www.learn-angularjs-apps-projects.com/AngularJs/dynamical-add-directives-in-angularjs

Lấy cảm hứng từ nhiều câu trả lời trước đây, tôi đã đưa ra chỉ thị "stroman" sau đây sẽ tự thay thế bằng bất kỳ chỉ thị nào khác.

app.directive('stroman', function($compile) {
  return {
    link: function(scope, el, attrName) {
      var newElem = angular.element('<div></div>');
      // Copying all of the attributes
      for (let prop in attrName.$attr) {
        newElem.attr(prop, attrName[prop]);
      }
      el.replaceWith($compile(newElem)(scope)); // Replacing
    }
  };
});

Quan trọng: Đăng ký các chỉ thị mà bạn muốn sử dụng restrict: 'C'. Như thế này:

app.directive('my-directive', function() {
  return {
    restrict: 'C',
    template: 'Hi there',
  };
});

Bạn có thể sử dụng như thế này:

<stroman class="my-directive other-class" randomProperty="8"></stroman>

Để có được điều này:

<div class="my-directive other-class" randomProperty="8">Hi there</div>

Protip. Nếu bạn không muốn sử dụng các chỉ thị dựa trên các lớp thì bạn có thể thay đổi '<div></div>'thành thứ bạn thích. Ví dụ, có một thuộc tính cố định có chứa tên của lệnh mong muốn thay vì class.