如何传递给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指令一些将被该指令使用的代码？

回答

相关问题