recherche

Maison  >  Questions et réponses  >  le corps du texte

angulaire.js - Comment compiler manuellement un dom inséré en angulaire?

Après avoir effectué quelques opérations sur la page, un morceau de code html sera inséré
Comment compiler ce html pour que les événements et variables qui y sont liés prennent effet~

滿天的星座滿天的星座2775 Il y a quelques jours733

répondre à tous(3)je répondrai

  • PHP中文网

    PHP中文网2017-05-15 16:53:11

    Pour des raisons de sécurité, les événements d'Angular dans le code HTML que nous avons inséré et le modèle ng lié ne fonctionneront pas.

    Si vous voulez que cela fonctionne, vous devez utiliser le service $compile d'Angular

    J'utilise généralement une directive lors du traitement 

    javascriptangular.module(...).directive('jxbBindCompiledHtml', function ($compile) {
  'use strict';

  return {
    template: '

<p></p>

',
    scope: {
      rawHtml: '=jxbBindCompiledHtml'
    },
    link: function (scope, elem, attrs) {
      scope.$watch('rawHtml', function (value) {

        if (!value) {
          return;
        }

        // we want to use the scope OUTSIDE of this directive
        // (which itself is an isolate scope).
        var newElem = $compile($.parseHTML(value))(scope.$parent);
        elem.contents().remove();
        elem.append(newElem);
      });
    }
  };
});

    html

    html<p jxb-bind-compiled-html="htmlvariable">
</p>

    htmlvariable est la variable de code html qui doit être insérée

    répondre
    0
  • 迷茫

    迷茫2017-05-15 16:53:11

    http://stackoverflow.com/questions/11771513/angularjs-jquery-how-to-get-dynamic-content-working-in-angularjs

    répondre
    0
  • 世界只因有你

    世界只因有你2017-05-15 16:53:11

    <!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>angular编译插入到dom的元素</title>
</head>
<body ng-controller="appCtrl">
    
    <!-- javascript
        ================================================== -->
    <script src="http://cdn.staticfile.org/jquery/2.1.0/jquery.min.js" type="text/javascript"></script>
    <script src="http://cdn.staticfile.org/angular.js/1.2.0rc3/angular.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var app = angular.module('app', []);
        app.controller('appCtrl', function ($scope, $compile) {
            $scope.arrs = [1,2,3,4,5,"成", "功", "编", "译"];
            var html = '<h1 ng-repeat="arr in arrs">{{ arr }}</h1>';
            
            // 编译html
            $html = $compile(html)($scope);
            // 插入到dom
            $('body').before($html);
        });
        angular.bootstrap(document, ['app']);
    </script>
</body>
</html>

    J'ai écrit un exemple, comme ci-dessus.

    répondre
    0
  • Annulerrépondre