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);
});
}
我可以看到两个日期都在检查元素中加载。但它始终在 View 上显示创建日期。 我在单击此按钮时显示详细信息,如果我这样做,它将在两个地方显示正确的信息。
但不确定为什么 ng-hide 在指令中不起作用。
请提出建议
最佳答案
试试这个。
这里的问题是您错过了模板部分中的打开 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>',
}
});
关于javascript - Angular ng-hide 在指令中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23624357/