我正在尝试为 实现自定义指令柜台 小部件。
我已经能够实现它，但是有很多事情我需要一些启发。
scope: (隔离范围)以更好的方式？ startnumber重置为“1”？ scope 在哪里继承自？它是否继承自被调用的元素？ HTML 片段
<body>
<counter-widget startnumber=1 ></counter-widget>
<counter-widget startnumber=1 ></counter-widget>
<counter-widget startnumber=1 ></counter-widget>
</body>
JS 片段
angular.module("myApp",[])
.directive("counterWidget",function(){
return{
restrict:"E",
scope:{
},
link:function(scope,elem,attr){
scope.f = attr.startnumber;
scope.add = function(){
scope.f = Number(scope.f) + 1;
}
scope.remove = function(){
scope.f =Number(scope.f) - 1;
}
scope.reset = function(){
scope.f = 1;
}
},
template:"<button ng-click='add()'>more</button>"+
"{{f}}"+
"<button ng-click='remove()'>less</button> "+
"<button ng-click='reset()'>reset</button><br><br>"
}
})
在此先感谢您的帮助。
最佳答案
首先，传入您的 startnumber 属性，这样我们就可以重置为该数字，而不必在数字中硬编码。
如果您要拥有多个计数器，则需要隔离范围。
但这是实现全局重置的方法:
app.directive("counterWidget",function(){
return{
restrict:"E",
scope:{
startnumber: '=',
resetter: '='
},
link:function(scope,elem,attr){
scope.f = attr.startnumber;
scope.add = function(){
scope.f++
}
scope.remove = function(){
scope.f--
}
scope.reset = function(){
scope.f = attr.startnumber
scope.$parent.triggerReset()
}
scope.$watch(function(attr) {
return attr.resetter
},
function(newVal) {
if (newVal === true) {
scope.f = attr.startnumber;
}
})
},
template:"<button ng-click='add()'>more</button>"+
"{{f}}"+
"<button ng-click='remove()'>less</button> "+
"<button ng-click='reset()'>reset</button><br><br>"
}
})
在 Controller 中，您只需添加一个每个指令都在关注的小重置功能:
$scope.triggerReset = function () {
$scope.reset = true;
console.log('reset')
$timeout(function() {
$scope.reset = false;
},100)
}
我不会使递减和递增函数过于复杂。++ 和 -- 应该没问题。
我们通过添加一个属性并将其传递给指令来创建全局重置函数。然后我们观察该属性是否为真值。每当我们单击重置时，我们都会在 $parent 范围内触发一个函数(triggerReset() 函数)。该函数快速切换 $scope.reset 值。任何在其 resetter 属性中具有该绑定(bind)的指令都将重置为 startnumber 属性中的任何内容。
另一件好事是重置只会影响您想要的计数器。您甚至可以创建多组计数器，只重置它自己组中的计数器。您只需要为您希望自己重置的每个组添加一个触发函数和变量。
这是演示:
Plunker
编辑:
所以问题出现在评论中 - $watch 功能可以“错过”切换吗？
我做了一些测试，到目前为止我得到的最好的答案是，在 plunker 上，如果我将它设置为 1ms 甚至完全删除时间参数，$watch 仍然会触发。
我也在这里向社区提出了这个问题:Can $watch 'miss'?
关于angularjs - 如何使这个自定义指令更好？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29819947/