没有应用AngularJS指令



我正在使用一个插件(jackrabbit -angularjs-datetimepicker),使用他们的例子它工作得很好。

但是,我想隐藏/显示基于其他输入的表单。我注意到,如果我隐藏/显示基于输入的指令,似乎指令从未得到应用(我只剩下一个输入字段)。

例如,如果他们想要培训-我会显示/隐藏一个表单,允许他们输入日期/时间(显示/隐藏是由ng-show完成)。

是否有一种方法可以再次应用该指令?指令是否在页面加载期间应用-从而导致显示/隐藏不应用指令?

如果你使用ng-if而不是ng-show,指令会被重新应用。你可以让你的指令实际监听/等待属性/作用域道具,并再次重新应用它,而不是依赖于ng-if,但为了给你更多的信息,我们必须看到一些代码。

如果ng-if对你来说很好,你应该知道它会在每次条件改变时重新渲染里面的所有内容。另一方面,Ng-show只对元素及其子元素应用隐藏样式,这样你的指令就不会被"应用"两次。

Ng-if还创建了一个隔离作用域(一个比它所在的作用域更深的作用域),这可能与您有关,也可能与您无关。

我测试了库并看到了您的问题,似乎该指令在使用一些ng属性时中断。

我能够使它工作,如果我使用ng-if/show/hide在周围的元素。例如,将指令放在div中。

:
在这里找到一个Codepen: http://codepen.io/tobiasc/pen/XbNZLz

注意ng-if &ng-show。ng-if将元素从DOM中取出,而ng-show只设置"display: none;"。这意味着如果使用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;
    };
});

最新更新