Question

我有这个HTML，这是我的代码中的标准，并在许多屏幕上使用：

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

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

有没有人对我如何使我的指令更灵活一点有任何想法，所以我可以传递一些可能需要的额外检查？

Answer 1

您可以像在控制器中一样将函数（如下例中的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。

Answer 2

如果我理解正确，您希望能够传递将要检查的自定义附加条件，以确定是否应禁用该按钮。您可以使用额外的范围变量（使用类似于上面的mb21＆＃39; s的解决方案）来表示您想要的任何其他自定义条件。所以像：

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

如何将一个将由该指令使用的代码传递给AngularJS指令？

2 个答案: