Angularjs 如何使这个定制指令更好？
我正在尝试为计数器小部件实现自定义指令 我已经能够实现它，但是有很多事情我需要一些启发Angularjs 如何使这个定制指令更好？,angularjs,angularjs-directive,Angularjs,Angularjs Directive,我正在尝试为计数器小部件实现自定义指令 我已经能够实现它，但是有很多事情我需要一些启发 该指令是否可以用更好的方式编写 如何更好地使用作用域：（隔离作用域）？ 单击任何重置按钮，我希望所有的startnumber都重置为“1” 作用域从何处继承？它从被调用的元素继承吗 HTML代码片段 <body> <counter-widget startnumber=1 ></counter-widget> <counter-widget startnu
- 该指令是否可以用更好的方式编写
- 如何更好地使用
（隔离作用域）？作用域： - 单击任何重置按钮，我希望所有的
都重置为“1”startnumber 作用域从何处继承？它从被调用的元素继承吗
<body>
<counter-widget startnumber=1 ></counter-widget>
<counter-widget startnumber=1 ></counter-widget>
<counter-widget startnumber=1 ></counter-widget>
</body>
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>"
}
})
<body>
<counter-widget startnumber=1 ></counter-widget>
<counter-widget startnumber=1 ></counter-widget>
<counter-widget startnumber=1 ></counter-widget>
</body>
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>"
}
})
angular.module（“myApp”，[]）
.directive（“counterWidget”，function（））{
返回{
限制：“E”，
范围：{
},
链接：功能（范围、要素、属性）{
scope.f=attr.startnumber；
scope.add=函数（）{
范围f=数量（范围f）+1；
}
scope.remove=函数（）{
范围f=编号（范围f）-1；
}
scope.reset=函数（）{
范围f=1；
}
},
模板：“更多”+
“{{f}}”+
“更少”+
“重置
”
}
})
提前谢谢你的帮助 您可以在html中使用ng repeat。您可以定义count=3
<body>
<div ng-repeat="index in count">
<counter-widget startnumber=1 ></counter-widget></div>
</body>
隔离作用域（作用域：{}）——这就像一个沙箱！如果要构建的指令是自包含且可重用的，则需要使用此命令。您的指令可能正在创建许多供内部使用的作用域属性和函数，外部世界永远不会看到它们。如果是这种情况，最好有一个独立的作用域。正如预期的那样，隔离作用域不会继承父作用域。这将是一种更好的方法 HTML
<body>
<counter-widget counter="controllerScopeVariable" ></counter-widget>
</body>
angular.module("myApp",[])
.directive("counterWidget",function(){
return{
restrict:"E",
scope:{
counter:'='
},
link:function(scope,elem,attr){
scope.counter = parseInt(scope.counter);
scope.add = function(){
scope.counter+=1;
}
scope.remove = function(){
scope.counter-=1;
}
scope.reset = function(){
scope.counter = 1;
}
},
template:"<button ng-click='add()'>more</button>"+
"{{f}}"+
"<button ng-click='remove()'>less</button> "+
"<button ng-click='reset()'>reset</button><br><br>"
}
});
angular.module（“myApp”，[]）
.directive（“counterWidget”，function（））{
返回{
限制：“E”，
范围：{
计数器：'='
},
链接：功能（范围、要素、属性）{
scope.counter=parseInt（scope.counter）；
scope.add=函数（）{
范围.计数器+=1；
}
scope.remove=函数（）{
范围.计数器-=1；
}
scope.reset=函数（）{
scope.counter=1；
}
},
模板：“更多”+
“{{f}}”+
“更少”+
“重置
”
}
});
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>"
}
})
我还在这里向社区提出了这个问题：请编辑您的答案，以说明为什么这是一个更好的方法。因为，在我的代码中，我是从属性调用它的，在您的例子中，您使用的是范围来访问
startnumberng repeat