Question

我有一个显示按钮的指令。 简单示例：

<my-directive></my-directive>

指令内部是HTML，类似于以下内容。（一旦页面被渲染，这将显示两个按钮。）

<button ng-repeat="option in options">{{option}}</button>

以下是我之前提到的指令的更详细信息：

<my-directive ng-model="someModel" options="[0, 1]" ui-options="['Cat', 'Dog']>
</my-directive>

＆GT;＆GT;＆GT;结果： 2个html按钮。

猫
狗

主要问题：如果符合某个条件，我想停用Dog按钮。

如果符合条件，我已经尝试有条件地将disabled指令添加到指令，但是同时禁用了Cat和Dog按钮，如下所示：（在指令元素上）

ng-attr-disabled="dogIsbad()"

当然，禁用这两个按钮，因为属性在指令上。如何才能在不修改实际指令的情况下将disabled属性添加到Dog按钮？

Answer 1

您可以将该选项作为parasster传递给dogIsbad（）并检查该选项是否为dog。

<button ng-repeat="option in options" ng-disabled="dogIsbad(option)">{{option}}</button>

在控制器中

dogIsbad = function(option){ return (option == "Dog");}

Answer 2

您必须在

等选项中传递它

<my-directive 
  ng-model="someModel"  
  options="[0, 1]" 
  ui-options="[{'name': 'Cat', disabled: true}, {name: 'Dog', disabled: false}]>
</my-directive>

然后在按钮显示中使用它

<button ng-repeat="option in options" ng-disabled="option.disabled">{{option.name}}</button>

Answer 3

＆＃13;

angular.module('app', [])
  .controller('ctrl', ['$scope', function($scope) {
    $scope.options = ['cat', 'dog'];
    $scope.dogIsbad = function(option){      
      return option == 'dog';
    }
  }])
  .directive('myDirective', function() {
    return {
      scope: {
        options: '=',
        dogIsbad: '&'
      },
      template: '<button ng-disabled="dogIsbad({option: option})" ng-repeat="option in options">{{option}}</button>'
    };
  });

＆＃13;

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller="ctrl">
  <my-directive options="options" dog-isbad='dogIsbad(option)'></my-directive>
</div>

＆＃13;

来自模板的Angular modify指令

3 个答案: