Question

我正试图学习$ compile，但只是想找几个关于我哪里出错的指示......

var app = angular.module("App", []);

app.controller("Ctrl", function ($scope, $http, $compile) {

}).directive('myDir', function ($compile) {

$(document).on("click", "#button", function ($compile) {
 var newDirective = angular.element('<li>{{app data}}</li>');
    $(".grid ul").append(newDirective);
    $compile(newDirective)($scope);
   });
  });

我想首先，当我把它放到我的目录中似乎什么都没有用，但是当我把它放在控制器中时它确实有效。其次它似乎没有编译，因为Angular标签/元素无法正确呈现。我无法弄清楚我哪里出错......

Answer 1

根据Docs $ compille

将HTML字符串或DOM编译到模板中并生成模板函数，然后可以将其用于将范围和模板链接在一起。

您正在使用它，只需要在您的指令代码中进行一些修改。

＆＃13;

var app = angular.module("App", []);

app.controller("Ctrl", function ($scope, $http, $compile) {

}).directive('myDir', function ($compile) {
    return{
        restrict: 'A',
        scope: {
            data:"=appdata"
        },
        link: function(scope,element){
                    var newDirective = angular.element('<li>'+ scope.data +'</li>');
                    var content = $compile(newDirective)(scope);
                    element.append(content);
        }
    }
    
});

＆＃13;

<!DOCTYPE html>
<html ng-app="App">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <div class="grid" >
      Hello
      <ul my-dir  appdata="'whatever'">
        
      </ul>
    </div>
    
  </body>

</html>

＆＃13;

Plunker：https://plnkr.co/edit/xqgnhXnVoYOsXFhPMbOY?p=preview

Answer 2

您的指令未格式化（创建）正确。无需使用JQUERY ...您正在编译html和数据（$ scope），但您没有将编译的模板应用于您的html。

检查此plunkr：https://plnkr.co/edit/eKdIEhyLBViWAOzfWhhV?p=preview

angular.module('plunker', [])
  .directive('compileDir', ['$rootScope', '$compile', compileDir])
  .controller('HomeController', [HomeController]);

  function compileDir($rootScope, $compile) {

      var self = {};

      self.restrict = 'A';
      self.scope = {
        compileDirOptions: '='
      };
      self.link = linkFn;

      return self;

      function linkFn($scope, $element, $attributes) {

        // I am making a new scope because I do not want to mess the    directive's one, you do not have to
        var newScope = angular.merge($rootScope.$new(),    $scope.compileDirOptions.data);
        var el = $compile($scope.compileDirOptions.html)(newScope);

        $element.append(el);

      }

   }

   function HomeController() {

       var self = this;

       self.message = "Hello World!";

       self.data = {
       html: '<li>{{name}}</li><li>{{color}}</li>',
       data: {
           name: 'app data',
           color: 'red'
       }
   }

}

你的HTML是这样的：

<!DOCTYPE html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
</head>

<body ng-controller="HomeController as home">
  <ul compile-dir compile-dir-options="home.data"></ul>
</body>

</html>

Angular没有编译正确

2 个答案: