Javascript 可重复DOM元素的角度ng模型
是否可以单独使用HTML标记在Angular中定义ng模型范围 我的标记:Javascript 可重复DOM元素的角度ng模型,javascript,html,angularjs,Javascript,Html,Angularjs,是否可以单独使用HTML标记在Angular中定义ng模型范围 我的标记: <section> <button ng-click="boxOpen = !boxOpen">Open/Close</button> <div ng-show="boxOpen">Stuff in here</div> </section> <section> <button ng-click="boxO
<section>
<button ng-click="boxOpen = !boxOpen">Open/Close</button>
<div ng-show="boxOpen">Stuff in here</div>
</section>
<section>
<button ng-click="boxOpen = !boxOpen">Open/Close</button>
<div ng-show="boxOpen">Other stuff in here</div>
</section>
上面的问题是“boxOpen”由两个按钮全局解释,因此单击其中一个按钮将同时显示/隐藏两个div
任何有帮助的,谢谢 如果定义两个不同的控制器,将得到两个不同的作用域
<section ng-controller="ctrl1">
<button ng-click="boxOpen = !boxOpen">Open/Close</button>
<div ng-show="boxOpen">Stuff in here</div>
</section>
<section ng-controller="ctrl2">
<button ng-click="boxOpen = !boxOpen">Open/Close</button>
<div ng-show="boxOpen">Other stuff in here</div>
</section>
如果不为此添加一个单独的控制器或类似荒谬的事情,您就无法做到这一点 这里最好的方法是制作这些按钮指令,每个按钮指令都有自己的隔离作用域。。。或者,使用两个不同的变量名,每个按钮一个,或者如果计划有很多按钮,将它们放入一个数组中
但我强烈建议采用指令方法。为什么不以不同的方式命名变量?创建一个新的作用域/控制器对我来说似乎太过了。我希望能够在不同的地方重用标记,而不必为每个标记都指定一个唯一的名称。在这种情况下,最好的方法是创建一个指令,如前所述。
<section my-show-hide-dir>
<button ng-click="boxOpen = !boxOpen">Open/Close</button>
<div ng-show="boxOpen">Stuff in here</div>
</section>
<section my-show-hide-dir>
<button ng-click="boxOpen = !boxOpen">Open/Close</button>
<div ng-show="boxOpen">Other stuff in here</div>
</section>
app.directive("myShowHideDir",
function() {
return {
restrict: 'A',
controller: ['$scope', '$element', '$attrs',
function($scope, $element, $attrs) {
$scope.boxOpen = false;
}
]
}
}
);