NG-显示没有约束力预期 [英] ng-show not binding as expected

问题描述

我想有我的表格上简单的切换。如果我点击一个按钮，那么我应该激活相应名字的部分，否则就应该从视图中隐藏。我的问题似乎是一个范围之一。如果我不使用我的分步骤一个孤立的范围，那么这两个分步骤将出现在一个切换活动和非活动在其他（这是不正确的行为）。如果我的不的使用隔离范围，那么 isActive（）永远不会被调用。

I'm trying to have a simple 'toggle' on my form. If I click one button, then I should activate a correspondingly-named section, otherwise it should be hidden from view. My issue appears to be that of a scope one. If I don't use an isolated scope on my substeps, then both substeps will appear active on one toggle and inactive on the other (this is incorrect behaviour). If I do use an isolated scope, then isActive() is never called.

我的code是如下：

<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相当哈克的方式来实现这一点，但我不知道是否有一种方法来角IFY它。

I have managed to achieve this in a fairly hacky way with JQuery but I was wondering if there was a way to Angular-ify it.

预期的行为是，如果我点击创建新表按钮，即CreateNewMeter分步应显示，而UseExistingMeter不应该。据我了解这里的问题是，分步的div没有创建一个子范围，并使用父作用域都 - 因此名字是未定义 - 右

The expected behaviour is that if I click the "Create new Meter" button, that the "CreateNewMeter" substep should be displayed, and the "UseExistingMeter" should not. As I understand the issue here is that the substep divs are not creating a subscope and are both using the parent scope - therefore name is undefined - right?

如果是这样，我怎么能解决这个问题？

If so, how can I remedy this?

推荐答案

下面是在其中创建与它自己的孤立范围新指令的解决方案。在我看来，这是一个更好的解决方案，特别是因为它可以让你只要你想有尽可能多的子步骤。

Here is a solution in which you create a new directive with it's own isolated scope. In my opinion, this is a better solution, especially since it allows you to have as many sub-steps as you want.

您需要在您的指令创建隔离范围，做的是有一个属性同时为名称并为 isActive 功能。因为名称只是你在你的HTML定义了一个字符串，可以将其指定为 @ 属性等等这是在你的指令范围，你在你的HTML指定字符串设定。我创建了功能（使用＆放它传递的指令; 语法）被称为 showWhen 键，如果你发现为了在参数通过名称，你在HTML你的函数指定，需要的你的指令，使用内传递一个对象的 名称与指令键名称作为值。

What you need to do when you create your isolate scope in the directive is have a property for both the name and for the isActive function. Since the name is just a string that you have defined in your html, you can specify it as an @ attribute so that is set in your directives scope to the string you specify in your html. I created the function (passing it to the directive using the & syntax) to be called showWhen and if you notice, in order to pass in the parameter name that you specify in your function in the html, you need to pass an object within your directive that uses name as a key with the directives name as the value.

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

该指令code：

The directive code:

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

下面是一个示例plunker： http://plnkr.co/edit/TKJehABKIPPHRbrUrqr3 p = preVIEW

Here is a sample plunker: http://plnkr.co/edit/TKJehABKIPPHRbrUrqr3?p=preview

这篇关于NG-显示没有约束力预期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！