[英]Angular ng-hide is not working in directive
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為什么不能在指令中工作。
請建議
試試這個。
這里的問題是您錯過了模板部分中的打開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>',
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.