Как мы можем использовать компиляцию $вне директивы в Angularjs

Я хочу использовать $compile в контроллере внутри функции, а не в директиве. Является ли это возможным? Я пытаюсь использовать код ниже.

$compile('<div ng-attr-tooltip="test">Cancel</div>')(scope)

Но это бросает область видимости undefined. Я попытался передать $scope внутри функции, но он не работает.

Ответ 1

Как Angular знает, что вы изменили DOM? Вам нужно скомпилировать html перед его добавлением (используя службу компиляции $).

Если вам абсолютно необходим доступ за пределами директивы, вы можете создать инжектор.

$(function() {
  // myApp for test directive to work, ng for $compile
  var $injector = angular.injector(['ng', 'myApp']);
  $injector.invoke(function($rootScope, $compile) {
    $('body').prepend($compile('<div ng-attr-tooltip="test">Cancel</div>')($rootScope));
  });
});

Ответ 2

Стоит отметить, что инжектор в предыдущем ответе (var $injector = angular.injector(['ng', 'myApp']);) не добавит компилирующую директиву к вашему текущему запущенному приложению angular, он вместо него создаст новое.

Чтобы динамически добавлять новые директивы в ваше приложение, вы должны использовать уже существовавший инжектор:

$(function() {
  angular.element(document).injector().invoke(function($rootScope, $compile) {
    $('body').prepend($compile('<div ng-attr-tooltip="test">Cancel</div>')($rootScope));
  });
});

Смотрите последний абзац в документации.

Ответ 3

Я пробовал ответить @Vaibhav Jain, без успеха. После небольшого большего копания, это то, что я нашел для работы над Angular 1.3, и jQuery:

$(function() {
  angular.element(document).injector().invoke(['$compile', function ($compile) {
    // Create a scope.
    var $scope = angular.element(document.body).scope();
    // Specify what it is we'll be compiling.
    var to_compile = '<div ng-attr-tooltip="test">Cancel</div>';
    // Compile the tag, retrieving the compiled output.
    var $compiled = $compile(to_compile)($scope);
    // Ensure the scope and been signalled to digest our data.
    $scope.$digest();
    // Append the compiled output to the page.
    $compiled.appendTo(document.body);
  });
});

Ответ 4

Я сделал это

var SCOPE;
app_module.controller('appController', function ($scope, $compile) {
    SCOPE = $scope;
    $scope.compile = function (elem_from, elem_to) {
        var content = $compile(angular.element(elem_from))($scope);
        angular.element(elem_to).append(content);
    }
});

используйте

SCOPE.compile(elem1.content, elem2);

Ответ 5

Я перекомпилировал свой html следующим образом, когда мне нужно было перекомпилировать мой html, чтобы применить изменения на странице.

Это происходит, когда я пытался перейти на другую ссылку и снова вернуться на страницу, но по какой-то причине код angular не компилировался.

Итак, я исправил это, скомпилировав html-часть страницы снова в событии загрузки.

function OnLoad() {
angular.element("form:first").injector().invoke(['$compile', function ($compile) {
    var $scope = angular.element("form:first").scope();
    $compile("form:first")($scope);
}]);
}

Ниже приведена декларация приложения.

<form ng-app="formioApp" ng-controller="formioAppCtrl">

и функция OnLoad() назначаются в событии onload на html-элементе на этой странице.