我是一个新手,很乐意在这里得到一些帮助。我正在努力找出为什么我无法设置一个指令来设置属性 hide="true" 或 "false",该属性将在指令(Rank)中用作更改内部指令(标签)的参数 ng -hide 隐藏标签。我尝试了一切
外部指令(等级)html:
<div>
<img src="/Components/Directives/images/blue_{{RankValue}}.svg" tooltip="{{RankValue}}/4" />
<label-info ng-hide="hide" header="{{header}}"></label-info>
</div>
外层指令(Rank)指令java脚本:
angular.module('reusableDirectives')
.directive('Rank', function () {
return {
restrict: 'E',
scope: {
hide: '='
},
link: function (scope, element, attrs) {
scope.safeApply(scope.RankValue = scope.$eval(attrs.value));
scope.safeApply(scope.hidelabel = "true");
if (attrs.hidelabel == "false")
scope.safeApply(scope.hidelabel = "false");
scope.hidelabel = attrs.hide;
},
templateUrl: '/Components/Directives/Rank.html'
};
})
.controller('rankCtrl', ['scope', function ($scope) {
}]);
内部指令(标签)Html:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>{{header}}</h3>
</div>
<div class="modal-body">
<div ng-bind-html="items"></div>
</div>
</div>
<div class="modal-footer">
<div style="float:left;">
<button class="btn btn-primary" ng-click="ok()">Close</button>
</div>
</div>
</script>
<div>
<div class="fs-labelInfo-text">
{{header}}
</div>
<img class="fs-labelInfo-img"
ng-click="update(header)"
src="Components/Directives/images/questionMark.png" />
</div>
内部指令(Label)指令java脚本:
angular.module('reusableDirectives')
.directive('labelInfo', function () {
return {
restrict: 'E',
scope: {
isolatedLabelHide: '@hidelabel'
},
controller: function ($scope, $element, $modal, $log, $http, $rootScope, myService) {
$scope.header = "header attribute";
$scope.caption = "label caption";
$scope.ok = function (header) {
myService.getLabelInfo(header).then(function (data) {
//this will execute when the AJAX call completes.
$scope.items = data;
console.log(data);
$scope.open();
});
};
$scope.open = function () {
$log.info('open');
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
controller: ModalInstanceCtrl,
resolve: {
header: function () {
return $scope.header;
},
items: function () {
return $scope.items;
}
}
});
modalInstance.result.then(function () {
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});
};
},
link: function (scope, element, attrs) {
scope.header = attrs.header;
},
templateUrl: '/Components/Directives/LabelInfo.html'
};
});
angular.module('reusableDirectives')
.controller('ModalInstanceCtrl', function ($scope, $modalInstance, header, items) {
$scope.items = items;
$scope.header = header;
$scope.ok = function () {
$modalInstance.close();
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
});
我用来测试的 html 是:显示标签的一个示例:
<rank hide="false" value="3.5"></rank>
显示标签的另一个示例:
<rank value="3.5"></rank>
要隐藏的示例将是:
<rank hide="true" value="3.5"></rank>
感谢你的付出。
最好的问候,陈