ng-show未按预期绑定

Question

我正在尝试在表单上进行简单的“切换”。 如果单击一个按钮，则应激活相应命名的部分，否则应将其隐藏。 我的问题似乎是范围一的问题。 如果在子步骤中未使用隔离范围，则两个子步骤将在一个切换上显示为活动状态，而在另一个切换上显示为无效（这是错误的行为）。 如果确实使用隔离范围，则永远不会调用isActive() 。

我的代码如下。

<div ng-controller='SubstepCtrl'>
    <button activates='CreateNewMeter'>
        Create new Meter
    </button>

    <button activates='UseExistingMeter'>
        Use Existing Meter
    </button>

    <div class='sub-step' substep='CreateNewMeter' ng-show='isActive(name)'>
        <h1>Create New Meter</h1>
    </div>

    <div class='sub-step' substep='UseExistingMeter' ng-show='isActive(name)'>
        <h1>Use Existing Meter</h1>
    </div>
</div>

角度：

.controller('SubstepCtrl', function($scope) {
    $scope.activeSubstepName = undefined;
    $scope.isActive = function(name) {
        return $scope.activeSubstepName == name;
    };
})

.directive('activates', function() {
    return {
        link: function($scope, $element, $attrs) {
            $element.on('click', function() {
                $scope.activeSubstepName = $attrs.activates;
                $scope.$apply();
            });
        }
    };
})

.directive('substep', function() {
    return {
        link: function($scope, $element, $attrs) {
            $scope.name = $attrs.substep;
        }
    };
});

我已经设法通过JQuery以一种相当古怪的方式实现了这一目标，但是我想知道是否有一种方法可以对它进行Angular化。

预期的行为是，如果我单击“创建新仪表”按钮，则应显示“ CreateNewMeter”子步骤，而不应显示“ UseExistingMeter”。 据我了解，这里的问题是子步骤div不会创建子范围，并且都在使用父作用域-因此名称未定义-对吗？

如果是这样，我该如何补救？

Answer 1

试试这个，避免创建自己的指令：

<div ng-controller='SubstepCtrl'>
    <button ng-click='setMeter("new")'>
        Create new Meter
    </button>

    <button activates='setMeter("existing")'>
        Use Existing Meter
    </button>

    <div class='sub-step' substep='CreateNewMeter' ng-show='meter === "new"'>
        <h1>Create New Meter</h1>
    </div>

    <div class='sub-step' substep='UseExistingMeter' ng-show='meter === "existing"'>
        <h1>Use Existing Meter</h1>
    </div>
</div>

在控制器的作用域上设置一个函数：

.controller('SubstepCtrl', function($scope) {
    $scope.activeSubstepName = undefined;
    $scope.isActive = function(name) {
        return $scope.activeSubstepName == name;
    };
    $scope.meter = null;
    $scope.setMeter = function(meterType) {
        $scope.meter = meterType;
    };
});

Answer 2

这是一个解决方案，您可以使用其自己的隔离范围创建一个新指令。 我认为，这是一个更好的解决方案，尤其是因为它允许您根据需要包含任意多个子步骤。

在伪指令中创建隔离范围时，需要做的是为name和isActive函数都具有一个属性。 由于name只是您在html中定义的字符串，因此您可以将其指定为@属性，以便在指令范围内将其设置为在html中指定的字符串。 我创建了名为showWhen的函数（使用&语法将其传递到指令），并且如果您注意到，为了传递在html中的函数中指定的参数name ，则需要在以name为键，以name为值的指令。

的HTML：

<div ng-controller='SubstepCtrl'>
    <button activates='CreateNewMeter'>
        Create new Meter
    </button>

    <button activates='UseExistingMeter'>
        Use Existing Meter
    </button>

    <button activates='UseImaginaryMeter'>
        Use Imaginary Meter
    </button>

    <button activates='none'>
        "Clear" all
    </button>

    <substep name="CreateNewMeter" show-when="isActive(name)">
      <h1>Create New Meter</h1>
    </substep>

    <substep name="UseExistingMeter" show-when="isActive(name)">
      <h1>Use Existing Meter</h1>
    </substep>

    <substep name="UseImaginaryMeter" show-when="isActive(name)">
      <h1>Use Imaginary Meter</h1>
    </substep>
</div>

指令代码：

.directive('substep', function() {
    return {
      restrict: 'E',
      scope: {
        name: '@',
        showWhen: '&'
      },
      transclude: true,
      template: '<div ng-transclude class="sub-step" ng-show="showWhen({name:name})"></div>'
    };
});

这是一个示例插件： http ://plnkr.co/edit/TKJehABKIPPHRbrUrqr3?p=preview