Question

我试图在一个指令中使用两个指令，但是最后一个指令被编译但是内容仍然有它的花括号。它是一个延迟加载指令，当我点击图像时会发生这种情况。知道为什么会这样吗？以下是演示：demo on plnker

＆＃13;

(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 a 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);

＆＃13;

<!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>

＆＃13;

Answer 1

嗯...在$ timeout中添加append似乎可以解决问题。

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

没有为延迟加载指令处理角度花括号

1 个答案: