angular.js directives passing variables to template

Question

I have a directive and I want to pass a variable from my controller to my directive's HTML template.
dataLoading is always undefined.

From my controller, I create a isMapping and initiate it as 1 then I bind that to my directive using data-Loading="{{isMapping}}" . dataLoading in my directive is then using in my template as ng-show="dataLoading == 1"

But, as I stated before, dataLoading is always undefined.

Here is my code

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>

also my controller the directive is linked to has this code.

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>

also my controller the directive is linked to has this code.

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

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

$scope.isMapping = 1;
}

Hope this helps someone.

Answer 1

I found 2 problems

1) You use data in naming so if you need access prop as data-loading you should use 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) You used data- L oading instead of data- l oading

JSFiddle example

Answer 2

I am not sure with my answer. if you are using data-loading it will take it as data attribute in html5. change the name and check it