Javascript ng显示未按预期绑定

我想在我的表单上有一个简单的“切换”。若我点击一个按钮，那个么我应该激活一个相应命名的部分，否则它应该从视图中隐藏。我的问题似乎是范围一。如果我在我的子步上不使用隔离作用域，那么两个子步在一个切换上都将显示为活动，而在另一个切换上显示为非活动。这是不正确的行为。如果我使用了一个隔离的作用域，那么永远不会调用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>

我已经用JQuery以一种相当粗糙的方式实现了这一点，但我想知道是否有一种方法可以实现它

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

---

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

试试这个，这样可以避免创建您自己的指令：

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

---

下面是一个解决方案，您可以在其中创建一个具有自己独立作用域的新指令。在我看来，这是一个更好的解决方案，特别是因为它允许您拥有任意多个子步骤

在指令中创建隔离作用域时，需要为名称和isActive函数都设置一个属性。由于名称只是在html中定义的字符串，因此可以将其指定为@attribute，以便在指令范围中将其设置为在html中指定的字符串。我使用&syntax创建了将其传递给指令的函数，该函数将在调用showhen时调用&syntax，如果您注意到，为了传递在html函数中指定的参数名，您需要在指令中传递一个对象，该对象使用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>'
    };
});

---

这是一个例子：

对不起，是的，我跳过了。但是，实际代码中是$scope.activeSubstepName。substep指令将控制器中的$scope.name设置为页面上最后一个substep元素的名称，这就是为什么您会看到它们都出现的原因。它们都使用相同的标志。您需要正确传递名称。。您的substep只使用控制器作用域，因此作用域上的name属性将被指令的最后一个实例覆盖。其思想是substep指令有一个名称，该名称将用作属性。我想这是可行的：@DanPantry你有一个dir，在这种情况下，你必须使用双向绑定。。但是为什么你需要它呢，你可以在控制器中为这两个组件取一个名字。这是一个不错的解决方案，但是如果我有多个子步骤，它就会崩溃。也就是说，我的问题只允许两个子步骤，所以我想它可以：p你能解释一下&does吗？：我知道我可以用谷歌搜索它，但为了完整起见，我想如果其他人偶然发现这个问题，你可以在隔离范围定义对象中使用&来传递指向指令的指针，以便能够从你的控制器范围调用函数。有关更多信息，请参阅将此选项标记为已接受，因为它不受仅有2个选项的限制。如果那是假的话，我道歉：别担心，最好/建议接受最好的答案。看见

<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>'
    };
});