Javascript AngularJS ngRepeat使用本地定义的集合在Directiving中重复

我试图弄清楚如何在一个指令中使用一个本地定义的对象数组来使用ngRepeat——我没有为这些使用任何控制器

我有一个指令模板设置，如下所示

<div id="radioBtn" class="btn-group env-switcher">
        <a
            ng-repeat="env in environments" ng-click="setEnv(env)" ng-class="{'active': env.active}"
            href="javascript:void(0);" class="btn btn-info btn-sm" >

            <i class="fa {{env.icon}}" aria-hidden="true"></i>
            &nbsp;&nbsp;{{env.label}}

        </a>
    </div>

但是，当页面上有多个这样的选项时，$scope会溢出并更新所有选项。因此，如果我在

指令实例1

上运行

setEnv

函数，那么

指令实例2和3也会发生变化

我知道有一个
scope
属性，我试图将它设置为
scope:{}
来隔离它，但是ngRepeat没有显示任何内容-我在猜测，因为我做错了什么

我将如何实现上述目标？e、 g使用本地定义的对象数组，在指令模板中与ngRepeat一起使用，而不使用$scope

谢谢
我假设这是您想要避免的当前行为：


function-envSwitcher（）{
返回{
限制：“C”，
链接：函数（$scope、$elem、$attrs）{
$scope.activeEnvironment='unknown'；
$scope.environments=[
{
标签：“本地”，
图标：“fa-hand-o-down”，
值：“本地”，
主动：正确
},
{
标签：'Staging'，
图标：“fa-hand-rock-o”，
值：'staging'，
活动：错误
},
{
标签：“现场”，
图标：“fa-hand-o-up”，
价值观：“活”，
活动：错误
}
];
$scope.setEnv=函数（env）{
angular.forEach（$scope.environments，function）（模型，键）{
if（角度等于（环境，模型））{
model.active=true；
$scope.activeEnvironment=model.value；
}
否则{
model.active=false；
}
});
}
}
}
}
角度模块（'myApp'，[]）；
有棱角的
.module（'myApp'）
.指令（“环境切换器”，环境切换器）

活动环境：{{activeEnvironment}
活动环境：{{activeEnvironment}
如果要重用父作用域，请尝试使用
作用域：{}
添加独立作用域。我在问题中已经提到，我尝试使用独立作用域，但这会阻止ngRepeat显示任何内容来查看此内容-请理解，有没有理由不能在模板本身中使用html？我们必须在某个地方安装一个控制器才能工作吗？因为我可以不使用指令而使用控制器来处理整个事情，那么问题就不会发生了？@OwenMelbourne这是我在回答之前必须尝试的事情。您可能需要ng transclude来使用隔离作用域。如果我能使您的原始代码以最小的更改工作，我将更新问题。@OwenMelbourne答案已编辑。这是我对原始代码所能做的最好的了：）不，太酷了，知道为什么需要将模板嵌入到指令中吗？@OwenMelbourne，因为在指令之外，它无法访问指令的隔离范围：）
App.directive('envSwitcher', [function(){
    return {
        restrict: 'C',
        link: function($scope, $elem, $attrs){

            $scope.activeEnvironment = 'unknown';

            $scope.environments = [
                {
                    label: 'Local',
                    icon: 'fa-hand-o-down',
                    value: 'local',
                    active: true
                },
                {
                    label: 'Staging',
                    icon: 'fa-hand-rock-o',
                    value: 'staging',
                    active: false
                },
                {
                    label: 'Live',
                    icon: 'fa-hand-o-up',
                    value: 'live',
                    active: false
                }
            ];

            $scope.setEnv = function(env){

                angular.forEach($scope.environments, function(model, key){

                    if( angular.equals(env, model) ){
                        model.active = true;
                        $scope.activeEnvironment = model.value;
                    }
                    else {
                        model.active = false;
                    }
                });
            }
        }
    }
}]);