Question

是否可以单独使用HTML标记在Angular中定义ng-model范围？

我的标记：

<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。

一切都有帮助，谢谢！

Answer 1

如果您定义2个不同的控制器，您将获得两个不同的范围

<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>

您也可以制定指令

<强> HTML

<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>

<强> JS

     app.directive("myShowHideDir",
    function() {
        return {
            restrict: 'A',
            controller: ['$scope', '$element', '$attrs',
                function($scope, $element, $attrs) {
                    $scope.boxOpen = false;
                }
            ]
        }

    }
);

Answer 2

如果没有为此添加单独的控制器（或同样荒谬的东西），你就无法做到。

这里最好的方法是制作那些按钮指令，每个指针都有自己的隔离范围......或者，使用两个不同的变量名，每个按钮一个（或者如果计划有很多则将它们放在一个数组中）按钮）。

但我强烈建议采用指令方法。

可重复DOM元素的角度ng模型

2 个答案: