Question

我想用动态按钮构建一个ng-repeat，它根据$state.params进行更改，因此我将它们包装在一个指令中。

link:function(scope,element,attrs) {
$rootScope.$watch('params.source',function() {
    var link = scope.link;
    var name = scope.name;
    var href = $state.href('home',{source:link});
    if($state.params.source.indexOf(scope.link) == -1) {
        var template = '<a href="'+href+'" class="btn 
            btn-default">'+name+'</a>';
    }
    else template = '<a href="'+href+'" class="btn 
        btn-default">'+name+' what!?</a>';
    el = $compile(template)(scope);
    element.replaceWith(el);                    
});
}

但在params第一次更改后，element被遗忘并以Cannot read property 'replaceChild' of null

回答

如何替换element？

编辑：我需要将整个元素换成最终产品中的其他元素，这就是为什么我不能使用ng-show或ng-if

谢谢！

Answer 1

您最好在HTML中使用ng-hide或ng-show。也许是这样的：

<div ng-repeat="yourArray as item">
   <a href="{{item.href}}" class="btn 
    btn-default">{{item.name}} <section ng-show="conditionToShow">what!?</section></a>';

</div>

这是一个更清洁的解决方案，它使您不必添加手表。手表价格昂贵，如果可能的话你应该避免使用它们。

修改：

<div ng-repeat="yourArray as item"> <div class="singleBtn" ng-show="conditionToShow" > <a href="{{item.href}}" class="btn btn-default">{{item.name}}</a> </div> <div class="multiBtn" ng-hide="conditionToShow"> <a //rest of multi btn code </div> </div>

由于Angular同时提供了ng-show和ng-hide指令，因此您可以根据一个条件来控制这些元素的表示。（即你的state.params）

如果是真的，它只显示一个btn，当它为假时它会显示多个按钮。如果逻辑需要反转，只需切换ng-show和ng-hide。

希望这次我更了解你的需要。

Angularjs 1.5替换指令元素html

1 个答案: