Question

我刚开始使用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？这样做的正确方法是什么？我怎样才能编译新添加的属性？

Answer 1

当ng-class被添加到action-button元素时，摘要将结束于该元素。你可以调用$ scope。$ apply（），但是我会将ng-class添加到每个锚元素中，然后就不需要再次调用$ scope。$ apply（）。

Answer 2

因为您正在编译content()的{{1}}，但li已添加ng-class。简单的解决方案是直接使用li指令添加ng-class，即

action-button

AngularJS指令：根据$ scope变量生成不同的HTML

2 个答案: