Question

这是我的自定义指令的Angular代码，它创建了一些div：

function footerDirective($compile){
     return { 
         link: function(scope,elements,attributes){

             function createDiv(content,cname,callback){
                var new_div=document.createElement("div"); 
                new_div.setAttribute("ng-click", callback);
                $compile(new_div)(scope);
                new_div.innerHTML=content;
                new_div.className=cname;
                elements[0].appendChild(new_div); 
             }

     for (var i=0;i<5;i++) {
       createDiv(i,"class-numbers","gallery.clickPage()");
     }
}}}

其中gallery.clickPage is a Controller method。以上工作正常。但是，我想在gallery.clickPage中传递 i作为参数，例如：

gallery.clickPage.bind(this,i)

如果我将后者作为createDiv中的参数传递，则它不起作用。我可以通过哪种方式实现目标？

Answer 1

正确的方法是在模板中

<div ng-repeat="mydiv in mydivs" ng-click="gallery.clickPage($index)">{{mydiv.content}}</div>

并在指令中：

scope.mydivs = [{content : 1}, {content : 2}, ...]

现在，回答你的问题：你的i是幻像 - 当你看到页面时它不存在，它只在页面由angular创建时才存在。所以你不能通过它。你可以像这样传球： createDiv(i,"class-numbers","gallery.clickPage(" + i + ")");

或者您可以将i值放入范围： scope.myVars = [1,2,3,4,5] createDiv(i,"class-numbers","gallery.clickPage(myVars[" + i + "])");

最后的注意事项是，如果你想创建角度元素，你可以：

angular.element('<div ng-click="someF()">{{anything}}</div>')，然后编译并附加到父级。

Answer 2

为什么不使用：

 for (var i=0;i<5;i++) {
   createDiv(i,"class-numbers","gallery.clickPage(" + i + ")");
 }

如果我只是一个数字你可以这样传递，生成的html将是gallery.clickPage（1）等。

将传递1

在指令中绑定方法

2 个答案: