angularjs - Angular curly braces not processed for lazy loading directive -
i trying use 2 directives inside directive, last directive compiled content still has it's curly braces.it lazy loading directive, happens when click on image. idea why happens? here demo: demo on plnker
(function (angular) { angular.module("app", []).directive("expandinggrid", [ "$http", function($window) { return { restrict: "e", templateurl:"grid.tmpl.html", controller: [ "$scope", "$http", "$attrs", function($scope, $http, $attrs) { var self = this; $scope.items = []; var $element = $attrs.$$element; $scope.items = [{title:"emanuel", desciption:"taking test"}]; } ] } } ]).directive("griditem", [ "$timeout", "$compile", function($timeout, $compile) { return { transclude:true, restrict: "ea", require: "^expandinggrid", templateurl: "griditem.tmpl.html", controller: [ "$scope", "$http", "$attrs", function ($scope, $http, $attrs) { } ], link: function(scope, element, attrs) { element.on("click", function(event) { scope.preview = {name:"emanuel", title:"detailed description"}; var $html = $("<div preview-item scope='preview'></div>"); var el=$compile($html)(scope); element.append(el); }); } } } ]).directive("previewitem", [ function() { return { transclude: true, scope:false, restrict: "ea", template: "{{preview.title}}", controller:["$scope", function($scope){ //alert() }] } } ]); })(window.angular);
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <title>example - example-example19-production</title> <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script> <script src="script.js"></script> </head> <body ng-app="app"> <expanding-grid></expanding-grid> </body> </html> <-- grid template--!> <ul id="og-grid" class="og-grid clearfix"> <li ng-repeat="item in items" grid-item scope="item"></li> </ul> <-- grid item template--!> <a href="#" data-title="{{item.title}}" data-description="{{item.description}}" > <img src="https://gmat.economist.com/sites/gmat.economist.com/files/u49/debrief.gif" alt="img01" /> </a>
well... adding append in $timeout seems trick.
element.on("click", function(event) { scope.preview = {name:"emanuel", title:"detailed description"}; var $html = $("<div preview-item scope='preview'></div>"); var el=$compile($html)(scope); $timeout(function(){ element.append(el); }, 0); });
Comments
Post a Comment