我有一个看起来像这样的“丑陋”按钮(我需要以这种方式完成,没有禁用 ng-disabled):
<button uib-tooltip="some text" ng-class="!result.checkStatus === true ? 'disabled' : ''" ng-click="!result.checkStatus === true ? '' : DoSomething(result)"> </button>
如果 !result.checkStatus === true
则按钮被禁用并且 ng-click 不起作用。在其他情况下启用并且 ng-click 从 Controller 激活函数 DoSomething(result)
。
一切正常。但我想为此做指令。我该怎么做?
这是我已经做过的:
<button uib-tooltip="some text" my-own-directiv func="DoSomething(result)" param="result.checkStatus"> </button>
指令:
angular.module("mod").directive("myOwnDirectiv", function () {
return {
restrict: "AE",
scope: {
param: "=",
func: "&"
},
template: " ng-class='!{{param}} === true ? 'disabled' : '' ' ng-click='!{{param}} === true ? '' : func()' "
};
});
我知道这行不通,但我只是想表明我的意思。
最佳答案
请检查:JSFiddle
像这样创建你的指令:
angular.module('Joy', [])
.controller("JoyCtrl", ['$scope', function($scope) {
$scope.isActive = true;
$scope.myHandler = function() {
alert('myHandler is invoked');
}
}])
.directive('myButton', function() {
return {
scope: {
active: '=',
handler: '&'
},
template: '<button ng-class="{disabled: !active}" ng-click="onClick()">Click me</div>',
controller: ['$scope', function($scope) {
$scope.onClick = function() {
if ($scope.active) {
$scope.handler();
}
};
}]
};
})
像这样使用它:
<div ng-app="Joy" ng-controller="JoyCtrl">
Active:
<my-button active="isActive" handler="myHandler()"></my-button>
<br> Disabled:
<my-button active="!isActive" handler="myHandler()"></my-button>
</div>
更新1
这是带有工具提示的更新版本:https://jsfiddle.net/asahcmz5/2/
更新2
如何将 class
传递给指令:https://jsfiddle.net/asahcmz5/4/
关于javascript - 如何在 AngularJS 自己的指令中使用 ng-class 和函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39141421/