使用AngularJS动态禁用指令

Question

我正在使用Bootstrap和AngularJS为一个测试项目工作（尝试）为我们的一个客户建立一个网站。作为项目的一部分，我试图模拟我们当前程序（Written in Progress Openedge）中的许多功能。 其中一个功能是动态启用/禁用操作，具体取决于用户操作（比如选择网格中的另一个记录，更改值，......）但是我遇到了一些麻烦才能使其工作。

我已经制定了一个指令来构建一个菜单结构（基于我在这里发现的东西......），它使用一组对象作为输入。构建菜单工程查找，我可以添加单击事件，...但添加此禁用功能是一个问题。 我创建了一个用来模拟我尝试做的事情（它仅使用一些按钮代替菜单来保持简单）here

简而言之，我正在尝试添加一个＆＃39; ng-class＆＃39;当对象具有已定义的禁用功能时，该属性使用该功能来确定是否应禁用该按钮。在这种情况下，选中或不选中复选框。 当我刚刚添加“禁用”时它的工作正常（但当然，这不是动态的）。

我怀疑我不得不使用$ compile来使这个工作，但$ compile（element）（范围）;似乎不起作用。

那么，我做错了什么？我怎样才能让它发挥作用？

作为旁注，我对Javascript / HTML / AngularJS很新，所以如果我犯了一些愚蠢的错误，请随意指出......; - ）

提前致谢...

Answer 1

查看结果： http://plnkr.co/edit/TgpNtGRjPICNgX2hi7NF?p=preview

备注

这里你可以轻松做的一件事就是使用ng-disabled属性。这可以添加到模板中，并连接到您的指令。这基本上就是我做的。唯一需要注意的是，您还需要确保调用该函数而不是仅将其用作属性。为了更好地指出这是一个函数，我将属性从disabled重命名为isDisabled()。以下是更新的指令代码。

指令变更

app.directive("myButton", function()
{
  return {
    restrict: 'E',
    scope: {
      button: '='
    },
    replace: true,
    template: '<button class="btn btn-default" ng-disabled="button.isDisabled()">{{button.text}}</button>',
  };
});