Question

我正在使用插件（jackrabbits-angularjs-datetimepicker），并且使用他们的示例工作正常。

但是，我想根据其他输入隐藏/显示表单。我注意到我是否隐藏/显示基于输入的指令似乎指令永远不会被应用（我只剩下一个输入字段）。

例如，如果他们想要训练 - 我会显示/隐藏表格以允许他们输入日期/时间（用ng-show显示/隐藏）。

有没有办法重新启动指令？是否在页面加载期间应用了指令 - 从而导致show / hide不应用指令？

Answer 1

如果使用ng-if而不是ng-show，将再次重新应用该指令。您可以使您的指令实际上听取/等待属性/范围道具并再次重新应用，而不是依赖于ng-if，但为了向您提供更多信息，我们必须查看一些代码。

如果ng-if适合您，您应该知道每次更改条件时它会重新呈现内部的所有内容。另一方面，Ng-show只是将隐藏的样式应用于元素及其子元素，因此您的指令不会被应用于＆＃34;两次。

Ng-if还会创建一个隔离范围（一个范围比放置它的范围更深），这可能会或可能不会引起您的关注。

Answer 2

我测试了库并看到了你的问题，看起来这个指令在使用某些ng属性时会中断。

如果我在周围元素上使用ng-if / show / hide，我就能使它工作。例如，将指令包装在div中。

<强>更新：
在这里找到Codepen：http://codepen.io/tobiasc/pen/XbNZLz

请注意ng-if＆amp; NG-表演。 ng-if将元素拉出DOM，而ng-show只设置＆＃34; display：none;＆＃34;。这意味着如果您使用ng-if显示/隐藏元素，它将被重置。如果您使用ng-show显示/隐藏元素，它会保持状态，在这种情况下，它将保留用户所做的任何选择。

HTML：

<body ng-app="datetimepickerDemo">
    <div ng-controller="tmpCtrl">
        <div ng-if="showTime">
            <datetimepicker data-ng-model="data.embeddedDate" data-datetimepicker-config="{ startView:'day', minView:'day' }" />
        </div>
        <button ng-click="showTimeChange(true)">Enable</button>
        <button ng-click="showTimeChange(false)">Disable</button>
    </div>
</body>

JS：

angular.module('datetimepickerDemo').controller('tmpCtrl', function ($scope) {
    $scope.showTime = true;
    $scope.showTimeChange = function (bool) {
        $scope.showTime = bool;
    };
});

AngularJS指令未被应用

2 个答案: