Question

基本上我尝试做的是构建一个将数组作为隔离范围对象的指令。使用ng-repeat构建html遍历数组，并使用$ compile服务针对指令的范围进行编译，然后将其推送到popover的content属性中。当ng-repeat应用于引用的直接父节点时，它可以正常工作。什么时候失败。有人可以启发它为什么不起作用。提前致谢

Plunkr网址：http://plnkr.co/edit/i5DlOWgHbyC8YovgKvt6?p=info

HTML 
<a working data-names="['cat','dog','mouse']">Click to get a basic popover -    working</a>
<br/>
<a not-working data-names="['cat','dog','mouse']">Click and you will get nothing</a>

JAVASCRIPT
app.controller('MainCtrl', function($scope) {
}).directive("working", function($log,$compile,$http){
    return {
        restrict: "A",
        scope:{
            names:'='
        },
        link: function(scope, elem, attrs){
            $log.log(scope.names);//Logs Names
            var html = "<p><a ng-repeat='name in names'>This is a {{name}}</a></p>";
            var popOverContent = $compile(html)(scope);
            $log.log(popOverContent);//Logs p.ngscope properly
            var options = {
                content: popOverContent,
                placement: "top",
                html: true
            };
            $(elem).popover(options);
        }
    };
}).directive("notWorking", function($log,$compile,$http){
    return {
        restrict: "A",
        scope:{
            names:'='
        },
        link: function(scope, elem, attrs){
            $log.log(scope.names);//Logs Names
            var html = "<p ng-repeat='name in names'><a>This is a {{name}}</a></p>";
            var popOverContent = $compile(html)(scope);//Logs only a comment 
            var options = {
                content: popOverContent,
                placement: "top",
                html: true
            };
            $(elem).popover(options);
        }
    };
});

Answer 1

显然与popover结构有关，而不是范围，因为两个指令都将ngrepeat保持在相同的范围级别，看起来popover需要在其模板中只有一个根元素，在第二个例子中你构建了几个root分子唯一的更新是tha而不是

var html = "<p ng-repeat='name in names'><a>This is a {{name}}</a></p>";

我用过

var html = "<div><p ng-repeat='name in names'><a>This is a {{name}}</a></p></div>";

http://plnkr.co/edit/eMGQFykGjEImzXFA0ffh?p=preview

angularjs $ compile service和ng-repeat

1 个答案: