我有一个指令,我想将变量从控制器传递到指令的HTML模板。
dataLoading
总是不确定的。
从控制器中,我创建一个isMapping
并将其启动为1,然后使用data-Loading="{{isMapping}}"
将其绑定到我的指令。然后,我的指令中的数据加载在我的模板中使用为ng-show="dataLoading == 1"
但是,正如我之前所说,dataLoading
总是不确定的。
这是我的代码
app.js
.directive('btnLoading', function () {
return {
scope: {
loadingText: '@',
loadingIconClass: '@',
mainText: '@',
mainIconClass: '@',
dataLoading: '@',
btnClass: '@',
actionFunc: '&'
},
replace: true,
restrict: 'E',
templateUrl: 'service/templates/btn-template.html',
controller: ['$scope', function ($scope) {
$scope.action = function () {
eval($scope.actionFunc);
alert($scope.dataLoading);
};
}]
}
});
服务/模板/btn-template.html
<div>
<button ng-show="dataLoading == 1" type="button" ng-class="btnClass" ng-click="action()"><i ng-show="mainIconClass" ng-class='mainIconClass'></i> {{mainText}}</button>
<span ng-show="dataLoading != 1">
<span class="fa fa-spin ">
<span aria-hidden="true" class="iconclass"></span>
</span>
<i ng-show="loadingIconClass" ng-class='loadingIconClass'></i>{{loadingText}}
</span>
cshtml
<btn-Loading data-Loading="{{isMapping}}"
loading-text="..loading.."
loading-icon-class="Animation glyphicon glyphicon-refresh glyphiconS-refresh-animate"
main-text="Map Files"
main-icon-class="glyphicon glyphicon-retweet"
btn-class="btn btn-primary"
action-func="TestButton()"></btn-Loading>
我的控制器也将指令链接到具有此代码。
app.controller('ctrl', function ($scope,$timeout, $q, Srv) {
$scope.TestButton = function () {
$scope.isMapping = 1;
$timeout(function () { $scope.isMapping = 0 }, 1500);
}
$scope.isMapping = 1;
}
基于randyprad的答案,这里是工作代码。
.directive('btnLoading', function () {
return {
scope: {
loadingText: '@',
loadingIconClass: '@',
mainText: '@',
mainIconClass: '@',
isLoading: '@',
btnClass: '@',
actionFunc: '&'
},
replace: true,
restrict: 'E',
templateUrl: 'service/templates/btn-template.html',
controller: ['$scope', function ($scope) {
$scope.action = $scope.actionFunc;
}]
}
}(;
服务/模板/btn-template.html
<div>
<button ng-if="!(isLoading == 1)" type="button" ng-class="btnClass" ng-click="action()"><i ng-show="mainIconClass" ng-class='mainIconClass'></i> {{mainText}}</button>
<span ng-if="isLoading == 1" ng-class="btnClass" >
<span ng-if="loadingIconClass" class="fa fa-spin "><i ng-class='loadingIconClass'></i></span> {{loadingText}}
</span>
mvc.cshtml
<btn-Loading is-loading="{{isMapping}}"
loading-text="..loading.."
loading-icon-class="Animation glyphicon glyphicon-refresh glyphiconS-refresh-animate"
main-text="Map Files"
main-icon-class="glyphicon glyphicon-retweet"
btn-class="btn btn-primary"
action-func="TestButton()"></btn-Loading>
我的控制器也将指令链接到具有此代码。
app.controller('ctrl', function ($scope,$timeout, $q, Srv) {
$scope.TestButton = function () {
$scope.isMapping = 1;
$timeout(function () { $scope.isMapping = 0 }, 1500);
}
$scope.isMapping = 1;
}
希望这对某人有帮助。
我发现了2个问题
1(您在命名中使用data
,因此,如果您需要访问道具为data-loading
,则应使用data-data-loading
;
<btn-Loading data-data-loading="{{isMapping}}"
loading-text="..loading.."
loading-icon-class="Animation glyphicon glyphicon-refresh glyphiconS-refresh-animate"
main-text="Map Files"
main-icon-class="glyphicon glyphicon-retweet"
btn-class="btn btn-primary"
action-func="TestButton()"></btn-Loading>
2(您使用data- l 弹奏而不是data- l oading
jsfiddle示例
我不确定自己的答案。如果您使用的是数据加载,则将其作为HTML5中的数据属性。更改名称并检查