如何傳遞給AngularJS指令一些將被該指令使用的代碼？

我有這樣的HTML這是我的代碼標準和許多屏幕上使用：如何傳遞給AngularJS指令一些將被該指令使用的代碼？

<button id="deleteButton" 
    ng-disabled="home.rowSelected === null || 
       home.view == 'preview'" 
    ng-click="ctrl.changeview(home.grid.view[home.rowselected], 'delete')">Delete</button>

爲了簡化事情，我已經轉換這一個指令：

app.directive('adminDeleteButton', ['stateService', function (stateService) { 
    return { 
     restrict: 'AE', 
     template: "<button id='newButton'\ 
          ng-disabled='home.rowSelected === null ||\ 
             home.view == \"preview\"'      ng-click='ctrl.changeView(home.grid.view[home.rowselected],\"delete\")' >Delete</button>", 
     link: function (scope, element, attrs) { 
      // not used now but maybe later 
      scope.stateService = stateService; 
     } 
    }; 
}]);

然而一些這方面的用途指令需要一個額外的檢查NG-禁用：

<button id="deleteButton" 
    ng-disabled="home.rowSelected === null || 
       home.view == 'preview' || 
       home.grid.view[home.rowSelected].tests.length > 0" 
    ng-click="ctrl.changeview(home.grid.view[home.rowselected], 'delete')">Delete</button> 


<button id="deleteButton" 
     ng-disabled="home.rowSelected === null || 
        home.view == 'preview' || 
        home.grid.view[home.rowSelected].tests.length > 0 || 
        home.grid.view[home.rowSelected].objectives.length > 0" 
     ng-click="ctrl.changeview(home.grid.view[home.rowselected], 'delete')">Delete</button>

有沒有人對我怎麼能讓我的指令，多一點靈活，任何想法我可以通過進一步的檢查，可能需要？

來源

2014-08-28 Alan2

您可以像在控制器中那樣附加函數（如下面示例中的myFun）到您的指令範圍。你的第一個例子改寫爲：

app.directive('adminDeleteButton', ['stateService', function (stateService) { 
    return { 
    restrict: 'E', //can only be element like <admin-delete-button home='home'><admin-delete-button/> 
    scope: { //create own scope for directive so you can use the directive multiple times on the same page 
     home: '=' 
    }, 
    template: "<button ng-disabled='myFun(home)'>", 
    link: function (scope, element, attrs) { 
     scope.stateService = stateService; 
     scope.myFun = function(home) { 
      return home.rowSelected === null || home.view == "preview" 
     }; 
    } 
    }; 
}]);

欲瞭解更多詳情：Angular directives guide。

來源

2014-08-28 15:20:02 mb21

什麼你的建議聽起來很有趣，我認爲這將解決我的問題，但我很抱歉。我不明白我如何將它應用於我的例子。你能告訴我一個會使用我的特定代碼的例子嗎？當我想到附加一個函數時，我假設你是指控制器中的一個函數，但是你的例子不使用控制器函數。 – Alan2 2014-08-28 15:27:14

@Alan我更新了我的答案。 – mb21 2014-08-28 15:34:20

如果我理解正確，您希望能夠通過自定義的附加條件來檢查是否應該禁用按鈕。您可以使用額外的範圍變量（使用類似於上述mb21的解決方案的東西）來執行此操作，它代表您想要的任何其他自定義條件。所以像：

app.directive('adminDeleteButton', ['stateService', function (stateService) { 
    return { 
    restrict: 'E' 
    scope: { 
     home: '=', 
     additionalCondition: '=' 
    }, 
    template: "<button ng-disabled='myFun(home)'>", 
    link: function (scope, element, attrs) { 
     scope.stateService = stateService; 
     scope.myFun = function(home) { 
      return home.rowSelected === null || home.view == "preview" || scope.additionalCondition 
     }; 
    } 
    }; 
}]);

，然後用它是這樣的...

<admin-delete-button additional-condition="myConditions"></admin-delete-button> 

/* in your controller */ 
$scope.myConditions = /* some boolean value that will be used at the end of the chain of ng-disabled values */

來源

2014-08-28 15:55:43 UnicodeSnowman

如何傳遞給AngularJS指令一些將被該指令使用的代碼？

回答

相關問題