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);
});
}
I can see both dates are loading in the inspect element.But it is always showing create date on the view. I am showing a detailed info while clicking on this ,if i do that it will display the correct one in both places .
But not sure why ng-hide is not working in directive .
Please suggest
Try this one.
Problem here you miss open div
tag in template portion and make sure assign value before need to create/initialize object.
$scope.dossierItem = {};
$scope.dossierItem.itemDetail = {};
$scope.dossierItem.itemDetail.pubdate = new Date();
This cause issue:
$scope.dossierItem.itemDetail.pubdate = new Date();
if not initialize dossierItem
object it throws errors. Please your console error to inspect better. Few things eliminated for clarity.
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>',
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.