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