Как добавить DOM Elements (директивы Angular) через jQuery.append()?

Есть ли способ добавить элемент, который является директивой Angular с помощью методов jQuery, таких как append(), и Angular сделать свою компиляцию/ссылку, чтобы он работал так, как если бы вы включили директиву в первый место?

Пример:

app.directive('myAngularDirective', [function () {
    ...
    // Lots of stuff in here; works when used normally but not when added via jQuery
});

$("body").append("<my-angular-directive />");

В настоящее время он просто добавляет пустой элемент DOM, называемый "my- angular -directive", но Angular не использует и не делает свою магию.

Ответ 1

Правильный способ - использовать: $compile, и в случае, если ваша директива вернется: directive definition object (что, кстати, рекомендуется для вас) затем может вызвать функцию link на нем (например, для ввода scope).

$('body').append($compile("<my-angular-directive />")(scope));
scope.$apply();

Ответ 2

Полный пример из документации Angular:

// Angular boilerplate
var app = angular.module("myApp", []);
app.controller("MyCtrl", function($scope) {
  $scope.content = {
    label: "hello, world!",
  };
});

// Wrap the example in a timeout so it doesn't get executed when Angular
// is first started.
setTimeout(function() {
  // The new element to be added
  var $div = $("<div ng-controller='MyCtrl'>new: {{content.label}}</div>");
  
  // The parent of the new element
  var $target = $("[ng-app]");

  angular.element($target).injector().invoke(function($compile) {
    var $scope = angular.element($target).scope();
    $target.append($compile($div)($scope));
    // Finally, refresh the watch expressions in the new element
    $scope.$apply();
  });
}, 100);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div ng-app="myApp">
   <div ng-controller="MyCtrl">old: {{content.label}}</div>
</div>

Ответ 3

В идеале вам следует избегать этого.

Однако, если вам действительно действительно нужно, тогда вы можете ввести и использовать службу $compile, за которой следует element.append.

Если вашей директиве не нужен доступ к определенной области, то вы даже можете назначить службу $compile и $rootScope window в функции run вашего прикладного модуля, а затем использовать их извне контекст angular, создав новый scope ($rootScope.new()) и завершите добавление элемента с помощью $rootScope.apply().

Ответ 4

Вы действительно хотите избежать выполнения какого-либо jquery, если можете, но я столкнулся с аналогичной проблемой не так давно, здесь был мой вопрос и правильный ответ, который должен быть в состоянии помочь вам. Короткий ответ заключается в использовании компиляции $.

Ответ 5

Принятый ответ не привел полный пример, здесь один:

https://codepen.io/rhinojosahdz/pen/ZpGLZG

<body ng-app="app" ng-controller="Ctrl1 as ctrl1">
</body>
<script>
angular.module('app',[])
.controller('Ctrl1', ['$scope', '$compile', function($scope, $compile){
    var vm = this;
    vm.x = 123;
    $('body').append($compile("<hola x='ctrl1.x' />")($scope));
}])
.directive('hola', function(){
    return {
        template: '<div ng-click="vm.alertXFromGivenScope()">click me!</div>'
        ,scope: {
            x : '='
        }
        ,controller: function(){
            var vm = this;
            vm.alertXFromGivenScope = function(){
                alert(vm.x);                
            };
        }
        ,controllerAs: 'vm'
        ,bindToController: true
    }
})
<script>

Ответ 6

Попробуйте это

angular.element($("#appendToDiv")).append($compile("<my-angular-directive />")($scope));