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

Question

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

从我的 Controller 中，我创建了一个 isMapping并将其启动为 1 然后我使用 data-Loading="{{isMapping}}" 将其绑定(bind)到我的指令。然后，我的指令中的 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>

指令链接到的我的 Controller 也有此代码。

app.controller('ctrl', function ($scope,$timeout, $q, Srv) {

$scope.TestButton = function () {
    $scope.isMapping = 1;
    $timeout(function () { $scope.isMapping = 0 }, 1500);
}

$scope.isMapping = 1;
}

based on RandyPrad answer here is the working code..

.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>

指令链接到的我的 Controller 也有此代码。

    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) 您使用了 data-Lloading 而不是 data-loading

JSFiddle example