我试图用角度进行加号/减号切换。作为基本功能，它允许用户在切换器的任一侧输入两个数字作为输入，然后，根据选择的切换，添加数字或减去它们。 我试图把它放在一个指令中，所以你可以多次调用它（所以如果你想为多个数字添加，减去或组合这两个，你可以）。我已经让它切换显示的内容，但我无法弄清楚如何让它进行正确的数学运算。
这是我到目前为止所拥有的：
关于plunker：http://plnkr.co/edit/PW990KXShDEYN9welhPe?p=preview
html：
<input type="number" size="2" ng-model="values.firstValue" ng-pattern="onlyNumbers" required>
<plus-minus-toggle></plus-minus-toggle>
<input type="number" size="2" ng-model="values.secondValue" ng-pattern="onlyNumbers">
<plus-minus-toggle></plus-minus-toggle>
<input type="number" size="2" ng-model="values.thirdValue" ng-pattern="onlyNumbers">
<button ng-click="doMath()">Calculate</button>
{{result}}
指令：
angular.module('diceAngularApp')
.directive('plusMinusToggle', function() {
return {
restrict: 'E',
scope:true,
template: '<button ng-click="custom=!custom"><span ng-show="custom">+</span><span ng-hide="custom">-</span></button>',
replace: true
};
});
控制器：
angular.module('diceAngularApp')
.controller('DiceController', function ($scope, $rootScope, $log) {
$scope.custom = true;
$rootScope.onlyNumbers = /^\d+$/;
$scope.values = {firstValue: 5, secondValue: 2, thirdValue: 3};
$scope.doMath = function() {
$scope.result = $scope.values.firstValue + $scope.values.secondValue + $scope.values.thirdValue;
};
});
答案 0 :(得分：1)
以下是关于plunker的示例，它隔离了指令的范围并提供了与父控制器的双向绑定：http://plnkr.co/edit/V7iIQUdSj4tNcRQCn16n?p=preview
基本思想是使指令＆＃34;可重复使用＆＃34;通过隔离其范围：
app.directive('plusMinusToggle', function() {
function plusOperation(a, b) {
return a + b;
}
function minusOperation(a, b) {
return a - b;
}
return {
restrict: 'E',
scope: {
operation: '='
},
template: '<button ng-click="isPlus=!isPlus"><span ng-show="isPlus">+</span><span ng-hide="isPlus">-</span></button>',
controller: function($scope) {
$scope.isPlus = true;
$scope.operation = plusOperation;
$scope.$watch('isPlus', function(isPlus) {
if (isPlus) {
$scope.operation = plusOperation;
} else {
$scope.operation = minusOperation;
}
});
},
replace: true
};
});
因此，在您的控制器中，您将有两个可用于双向绑定的变量：
app.controller('MainCtrl', function ($scope, $rootScope, $log) {
$scope.op1 = angular.noop;
$scope.op2 = angular.noop;
})
在你看来，你在哪里发生双向绑定：
<plus-minus-toggle operation="op1"></plus-minus-toggle>
<plus-minus-toggle operation="op2"></plus-minus-toggle>
回到MainCtrl，您可以利用那些将根据指令的独立范围进行更改的操作：
$scope.doMath = function() {
$scope.result = $scope.op2($scope.op1($scope.values.firstValue, $scope.values.secondValue), $scope.values.thirdValue);
};
您可以在角度指南的Isolating the Scope of a Directive部分阅读更多相关信息。
答案 1 :(得分：1)
您可以使您的指令同时包含输入和按钮。这样你就可以将一个操作附加到一个数字上。将$ scope.values设置为具有值和操作的对象数组（第一个对象没有操作）。
$scope.values = [
{
value: 5,
},
{
value: 2,
op: '+'
},
{
value: 3,
op: '-'
}
];
现在您可以执行ng-repeat来显示输入和按钮。这样可以轻松添加更多输入/按钮。
<span ng-repeat="v in values">
<plus-minus-toggle value="v"></plus-minus-toggle>
</span>
这是指令：
app.directive('plusMinusToggle', function() {
return {
restrict: 'E',
scope:{
value: '='
},
template: '<span><button ng-show="showButton(value.op)" ng-click="buttonClick()"><span ng-bind="value.op"></span></button><input type="number" size="2" ng-pattern="onlyNumbers" ng-model="value.value"/></span>',
replace: true,
link: function($scope, elem, attr){
$scope.onlyNumbers = /^\d+$/;
$scope.showButton = function(op){
return op != undefined;
}
$scope.buttonClick = function(){
if($scope.value.op == '+')
$scope.value.op = '-';
else
$scope.value.op = '+';
}
}
};
});
此方法还可以使添加乘法或除法选项变得相当简单（单击按钮可以循环选项）。
这是demo。
答案 2 :(得分：0)
看看这是否适合您：
$('div[id^="modtab-"]').click(function(){
$（this）.find（＆＃39; .modtab-toggle＆＃39;）。attr（＆＃34; src＆＃34;，function（i，attr）{ var o = this.src.indexOf（＆＃39; plus＆＃39;）＆gt; -1？ this.src.replace（＆＃39;加＆＃39;，＆＃39;减去＆＃39;）：this.src.replace（＆＃39;减去＆＃39;，＆＃39;加＆＃39;）; 返回o; }）; }）;
<div id="tab-module-row-1">
</div>
<div class="module-row module-tab pull-right" id="modtab-sql_dss">
<img src="images/icons/icon-orangebox-plus.png" class="modtab-toggle">
</div>
<div id="tab-module-row-2">
</div>
答案 3 :(得分：0)
我对布局提出了一些建议： http://plnkr.co/edit/WsWhewTSVDldiLQkROBP?p=preview 。
我必须说实话，这个有点不可思议的东西对我来说很不安，我不知道在哪里实现新功能。
但我可以给你一些一般性的指示：
我会做一个功能
function math(op,num1,num2) {
switch (op) {
case 'add': return num1+num2;
case 'sub': return num1-num2;
case 'mul': return num1*num2;
case 'dev': return num1/num2;
//etc
}
}
用于切换操作按钮上的操作：
op=['+','-','×','÷',etc] 答案 4 :(得分：0)
主要建议使用最新版本的angularjs：
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
该字段的第二部分分为独立的索引范围：
<field ng-repeat="case in cases"></field>
并将与当前字段对应的对象作为事件函数＆＃34; toggle（case）＆＃34;
引入app.directive('field', function() {
return {
restrict: 'E',
scope: true,
template: '<div>\
<input type="number"\
size="2"\
ng-model="case.value"\
ng-pattern="onlyNumbers" required>\
<button ng-if="!$last"\
ng-click="toggle(case)">\
<span>{{ case.custom }}</span>\
</button>\
</div>',
replace: true,
controller: function ($scope) {
$scope.toggle = function (ths) {
ths.custom = ths.custom === "+" ? ths.custom = "-" : ths.custom = "+";
}
}
};
最后为我们创建数据字段：
$scope.cases = [{value: 5, custom: "+"}, {value: 2, custom: "+"}, {value: 3, custom: "+"}, {value: 100, custom: ""}];
并放入观察者字段，如果其中一个更改，则执行该函数：
$scope.$watch('cases', function () {
var result = "";
for(var i = 0; i < $scope.cases.length; i++) {
result += $scope.cases[i].value + $scope.cases[i].custom
}
$scope.result = $window.eval(result);
}, true)
第三个论点说我们遵循对象并将＆＃34; true＆＃34;。