Angular ng-hide在指令中不起作用

Question

return {
restrict : "AC",
template : + '<div> '
+ '     <span class="smallFont" data-ng-hide="dossierItem.itemDetail.pubdate">{{ item.createdOn | hbdatetime }}</span>'
+ '     <span class="smallFont" data-ng-show="dossierItem.itemDetail.pubdate">{{ item.itemDetail.pubdate | hbdatetimepubdate }}</span>'
+ ' </div>',
link : function(scope, elm, attrs) {
scope.$watch(attrs.itemList, function(value) {
elm.text(value);
});
}

我可以看到两个日期都在inspect元素中加载，但是它总是在视图中显示创建日期。 单击此按钮时，我正在显示详细信息，如果这样做，它将在两个地方都显示正确的信息。

但是不确定ng-hide为什么不能在指令中工作。

请建议

Answer 1

试试这个。

工作演示

这里的问题是您错过了模板部分中的打开div标签，并确保在需要创建/初始化对象之前先赋值。

    $scope.dossierItem = {};
    $scope.dossierItem.itemDetail = {};
    $scope.dossierItem.itemDetail.pubdate = new Date();

这会导致问题：

$scope.dossierItem.itemDetail.pubdate = new Date();

如果未初始化dossierItem对象，则会引发错误。 请检查您的控制台错误以进行更好的检查。 为清楚起见，几乎没有删除任何东西。

var myApp = angular.module("myApp",[]);

myApp.controller("MainCtrl",function($scope){

    $scope.dossierItem = {};
    $scope.dossierItem.itemDetail = {};
    $scope.dossierItem.itemDetail.pubdate = new Date();

    $scope.validDate = true;

    $scope.item= {},
    $scope.item.createdOn = new Date();

    console.log($scope.dossierItem);
});


myApp.directive("test", function(){

return {
restrict : "AC",
template :'<div>'
    +'<span class="smallFont" ng-hide="dossierItem.itemDetail.pubdate">span1 {{item.createdOn}} </span>'
    +'<span class="smallFont" ng-show="dossierItem.itemDetail.pubdate">span2 {{item.createdOn}}</span>'
+'</div>',
}
});