來自模板的角度修改指令

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>

>>>結果： 2個html按鈕。

• 貓
• 狗

主要問題 ：如果滿足特定條件，我想禁用“ Dog按鈕。

我嘗試過在條件滿足的情況下有條件地向指令添加disabled指令，但這會同時禁用Cat和Dog按鈕，例如：（ 在指令元素上）

ng-attr-disabled="dogIsbad()"

當然，這會禁用兩個按鈕，因為該屬性位於指令上。 如何僅將禁用的屬性添加到“ Dog按鈕而不修改實際指令？

Answer 1

您可以將選項作為參數傳遞給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

 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>' }; }); 

 <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>