Угловые не компиляции correcty

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

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); 
    }); 
    });

Я полагаю, во-первых, ничего похоже, работает, когда я помещаю его в свой каталог, но это происходит, когда я помещаю его в контроллер. И, во-вторых, он, похоже, не компилируется, поскольку угловые метки/элементы не отображаются правильно. Я просто не могу понять, где я буду неправильно ...

источник

2016-12-14 Whirlwind991

Согласно Docs $ compille

Компилирует HTML строку или DOM в шаблон и производит шаблонную функцию, которая затем может быть использована связать область и шаблон вместе.

Вы на правильном пути, чтобы использовать его, просто нужно внести некоторые изменения в свой код директивы, как это.

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); 
 
     } 
 
    } 
 
    
 
});

<!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="[email protected]" 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>

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

источник

2016-12-14 02:55:38 Deep

Это является удивительным спасибо! Я случайно пропустил какой-то код, когда я привел пример, хотя и отредактировал. Первоначально у меня был щелчок на кнопке, который добавил элемент списка в UL .. (Извините, я должен был правильно прочитать свой код перед отправкой). Можно ли обновить плунжер, чтобы показать, как это включить, пожалуйста? Другое то, что он отлично работает – Whirlwind991

уверен, просто обновите вопрос с помощью html, я дам попробовать – Deep

обновил плункер, предположив ваш html, надеюсь, что это поможет. – Deep

Ваша директива не отформатирована (создан) правильно. Не нужно использовать 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="[email protected]" 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>

источник

2016-12-14 04:05:01 btinoco

спасибо, что нашли время ответить, к сожалению, мой голос идет на другой ответ, но это все равно другой способ сделать это, так что это круто! – Whirlwind991

Угловые не компиляции correcty

ответ

Смежные вопросы