angular.js指令将变量传递给模板

Question

我有一个指令，我想将一个变量从控制器传递到指令的HTML模板。
dataLoading始终是未定义的。

从控制器创建一个isMapping并将其初始化为1，然后使用data-Loading="{{isMapping}}"将其绑定到我的指令。 然后，我指令中的dataLoading在我的模板中用作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);
            };
        }]
}
});

service / templates / 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;
        }]
}

}）;

service / templates / 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;
}

希望这对某人有帮助。

Answer 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）您使用的数据- 大号代替oading DATA- 升 oading的

JSFiddle 示例

Answer 2

我不确定我的回答。 如果您正在使用数据加载，它将在html5中将其作为data属性。 更改名称并检查