javascript - 如何通过 element.append 使 ui-sref 动态工作？

Question

我正在尝试创建一个分页指令。填充 total_for_pagination 后，将创建用于分页的正确 HTML。

我的 html: max = max per page

<pagination data-number="{{ total_for_pagination }}" data-max="50"></pagination>

我的指令:

    link: function(scope, element, attrs){
        scope.$watch(function(){return attrs.number;}, function(){
            //Need to watch because there is a query to db to know how many elements to page.
            var page_element = '<ul>';
            for(var i = 0; i*attrs.max<attrs.number; i+=1){
                page_element += '<li class="pagination"><a ui-sref="users({start: '+i*attrs.max+', end: '+((i*attrs.max)+(attrs.max-1))+'})">'+i+'</a></li>';
            }
            page_element += '</ul>';
            element.append(page_element);
        });
    }

发生的事情是，当我检查我的 html 时，它们应该是它们应该的样子，但是 ui-sref 注意到当我点击它时状态发生了变化。当我只放置相同的代码时，工作正常。

我做错了什么？谢谢!

Answer 1

我们在这里需要的是使用 Angular js 核心功能:$compile .请参阅 this working example 中的实际操作.这是有技巧的行:$compile(element.contents())(scope);

这可能是指令定义:

.directive("myDirective", function($compile){
  return {
    restrict: 'A',
    link: function(scope, element, attrs){
        scope.$watch(function(){return attrs.number;}, function(){
            var page_element = '<ul>'
            +'<li><a ui-sref="home">ui-sref="home"</a></li>'
            +'<li><a ui-sref="other">ui-sref="other"</a></li>'
            + '</ul>';
            element.append(page_element);
            $compile(element.contents())(scope);  
        });
    }
  }
})

对于这些状态:

  .state('home', {
    url: "/home",
    templateUrl: 'tpl.html',
  })
  .state('other', {
    url: "/other",
    templateUrl: 'tpl.html',
  })

会做我们需要的。查一下here .另见一点相关:Form Validation and fields added with $compile