我刚开始使用AngularJS并立即遇到问题：
我有一个侧边栏，其中包含＆＃34; 操作按钮＆＃34; - 根据当前活动的视图，应该可以看到不同的按钮。
我的视图控制器定义了一个如下所示的对象：
$scope.sidebar.actionButtons = [
{ icon: "plus", label: "Add", enabled: true, url: "customer.new" },
{ icon: "minus", label: "Delete", enabled: false, action: function(){ alert("Not implemented yet"); }}
];
如您所见，有两种不同的操作按钮：按钮更改为另一个视图（url设置为customer.new），或按钮触发任意功能（{ {1}}设置为action）。
每个按钮类型都必须生成一些稍微不同的html，而且我无法使其正常工作。
玩了几个小时后，这是我目前的（不工作）方法：
我的侧边栏使用以下模板代码生成按钮：
alert()现在，<ul class="nav" id="sidebar-action-buttons">
<action-button ng-repeat="button in actionButtons" button="button"/>
</ul>
指令具有所需的一切，并且应根据按钮类型生成html：
actionButton这会生成正确的内容。这里的问题是，angular.module('myApp')
.directive('actionButton', function($compile) {
function linker($scope, $element, $attrs){
var innerHtml = '';
$element.attr('ng-class', '{disabled: !button.enabled}');
if($scope.button.url) {
$element.attr('ui-sref-active', 'active')
innerHtml = '<a ui-sref="{{button.url}}">';
} else {
innerHtml = '<a ng-click="button.action()">';
}
innerHtml += '{{button.label}}</a>';
$element.html(innerHtml).show();
$compile($element.contents())($scope);
}
return {
restrict: 'E',
replace: true,
scope: { button: "=" },
link: linker,
template: "<li></li>"
}
});
元素（在本例中为actionButton）的属性不会被编译。
指令如何根据范围变量生成不同的html？这样做的正确方法是什么？我怎样才能编译新添加的属性？
答案 0 :(得分：1)
当ng-class被添加到action-button元素时，摘要将结束于该元素。你可以调用$ scope。$ apply（），但是我会将ng-class添加到每个锚元素中，然后就不需要再次调用$ scope。$ apply（）。
答案 1 :(得分：0)
因为您正在编译content()的{{1}}，但li已添加ng-class。简单的解决方案是直接使用li指令添加ng-class，即
action-button